CODEWITHSUNDEEP
reactjstypescriptthirdweb
Aniruddh Maini
Aniruddh Maini

Reputation: 35

Property 'children' does not exist on type 'IntrinsicAttributes & ThirdwebWeb3ProviderProps'

I am following a tutorial to build an NFT marketplace using ThirdWeb and react.js. When I am trying to connect ThirdWeb to the Rinkebey test network I am getting this error in _app.tsx file:

Type '{ children: ReactNode; supportedChainIds: number[]; connectors: { injected: {}; }; }' is not 
assignable to type 'IntrinsicAttributes & ThirdwebWeb3ProviderProps'.
Property 'children' does not exist on type 'IntrinsicAttributes & ThirdwebWeb3ProviderProps

This is my _app.tsx file

import '../styles/globals.css'
import { ThirdwebWeb3Provider } from '@3rdweb/hooks'

/**
 * The chain ID 4 represents the Rinkeby network
 * The `injected` connector is a web3 connection method used by Metamask
 */
const supportedChainIds = [4]
const connectors = {
  injected: {},
}
type Props = {
  children?: React.ReactNode
};

function MyApp(props: Props) {
  return (
    <ThirdwebWeb3Provider
      supportedChainIds={supportedChainIds}
      connectors={connectors}
    >
    {props.children}
    </ThirdwebWeb3Provider>
  )
}

export default MyApp

I have tried to figure it out but cannot reach any solution.
Please someone help me to solve this error.

Upvotes: 1

Views: 3314

Answers (3)

endlessCode
endlessCode

Reputation: 1405

you can do:

const MyApp: React.FC<PropsWithChildren<Props>>(props) {
  return (
    <ThirdwebWeb3Provider
      supportedChainIds={supportedChainIds}
      connectors={connectors}
    >
    {props.children}
    </ThirdwebWeb3Provider>
  )
}

Upvotes: 0

nachoiacovino
nachoiacovino

Reputation: 15

you're using a deprecated version of the thirdweb package, the latest updated package is @thirdweb-dev/react, in which this error doesn't happen.

Upvotes: -2

foscjos
foscjos

Reputation: 35

React 18 removed the default prop "children". It seems like the library author did not update their props interface to add "children" manually. You could try downgrading your version of react locally to 16.X.X or 17.X.X and that should solve the issue.

Upvotes: -2

Related Questions