1

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.

Aniruddh Maini
  • 35
  • 1
  • 6

3 Answers3

0

you can do:

const MyApp: React.FC<PropsWithChildren<Props>>(props) {
  return (
    <ThirdwebWeb3Provider
      supportedChainIds={supportedChainIds}
      connectors={connectors}
    >
    {props.children}
    </ThirdwebWeb3Provider>
  )
}
endlessCode
  • 1,255
  • 4
  • 21
  • 36
-1

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.

foscjos
  • 37
  • 6
-2

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.

nachoiacovino
  • 17
  • 4