#Converting to NextJS 13

6 messages · Page 1 of 1 (latest)

earnest lake
#

Hello! I am trying to include some components into the top-level of the project, but it doesn't seem tot work. This is what my top level would look like in current NextJS versions:

`
import '../styles/globals.css'
import { ChainId, ThirdwebProvider } from '@thirdweb-dev/react'

function MyApp({ Component, pageProps }) {

const activeChainId = ChainId.Goerli

return (

<ThirdwebProvider 
desiredChainId={activeChainId}
chainRpc={{
  [activeChainId]: process.env.INFURA
}}
>
  <Component {...pageProps} />
</ThirdwebProvider>

)
}

export default MyApp

`

How can I do this in NextJS 13?

plucky vault
earnest lake
#

@plucky vault Thanks for coming. This is my root layout:

`

layout.js

'use client';

import './globals.css'
import { ThirdwebProvider, ChainId } from '@thirdweb-dev/react'
import { useRef } from "react"

const activeChainId = ChainId.Goerli;

const magicLinkWalletConnector = {
name: "magic",
options: {
apiKey: 'pk_live_55AB37',
rpcUrls: {
[ChainId.Goerli]: "",
},
},
};

export default function RootLayout({ children }) {

const connectors = [magicLinkWalletConnector];

return (
<html lang="en">
<head />
<ThirdwebProvider
desiredChainId = {activeChainId}
walletConnectors = {connectors}
>
<body>
{children}
</body>
</ThirdwebProvider>
</html>
)
}

`

#

However when I try to use it in the children components, this is what I get:

`
Unhandled Runtime Error
Error: Invariant failed: Magic connector not found, please make sure it is provided to your <ThirdwebProvider />

Source
src/app/components/Wallet.js (19:36) @ magicLinkWalletConnector

17 | };
18 |

19 | const connectWithMagic = useMagic(magicLinkWalletConnector);
| ^
20 |
21 | const [email, setEmail] = useState("");
22 |
`

plucky vault
#

this seems to be an issue with this library you are using, i've never heard about it

earnest lake
#

That's the last answer I wanted to hear. At least it's not an issue on my side. This library is part of Thirdweb Web3 wallet