I was trying to follow the docs below about WalletConnect Web3Modal setup with Wagmi: https://docs.walletconnect.com/web3modal/react/about?platform=wagmi, and Web3Modal Github repo: https://github.com/WalletConnect/web3modal
My NextJs dependencies:
- next: 13.5.4, react: 18.2.0
Installing New Dependencies: pnpm add @web3modal/wagmi wagmi viem
- @web3modal/wagmi: 3.1.0, viem: 1.16.6, wagmi: 1.4.5
There is no _app.tsx file in my NextJs project, so I put my code below in my /app/(root)/layout.tsx
const projectId = 'MY_PROJECT_ID'
const chains = [mainnet, arbitrum]
const wagmiMetadata = { ... }
const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata: wagmiMetadata })
createWeb3Modal({ wagmiConfig, projectId, chains, })
export default function RootLayout({
children }: { children: React.ReactNode }) {
return (
<html lang="en" >
<body className={inter.className}>
<TanstackProvider>
<NextThemeProvider attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange >
<Topbar />
<main className='flex flex-row'>
<LeftSidebar />
<WagmiConfig config={wagmiConfig}>
<section className='flex min-h-screen flex-1 flex-col ...'>
<div className='w-full '>
{children}
</div>
</section>
</WagmiConfig>
</main>
<Bottombar />
</NextThemeProvider>
</TanstackProvider>
<Toaster />
</body>
</html>
)
}
Then I got this linter error below regarding the config={...} inside the <WagmiConfig></WagmiConfig>
Type 'Config<any, any> & { queryClient: QueryClient; }' is not assignable to type 'Config<any, any>'.
Type 'Config<any, any> & { queryClient: QueryClient; }' is not assignable to type
'{ queryClient: QueryClient; }'.
Types of property 'queryClient' are incompatible.
Type 'QueryClient' is missing the following properties from type 'QueryClient':
queryCache, mutationCache, logger, defaultOptions, and 4 more.ts(2322)
index.d.ts(30, 5): The expected type comes from property 'config' which is declared here
on type 'IntrinsicAttributes & WagmiConfigProps<any, any> & { children?: ReactNode; }'
I tried to wrap that WagmiConfig tag in different places, but got the same error above.
When I ran the NextJs, I saw this error:
./node_modules/.pnpm/[email protected]_@[email protected][email protected]_immer@
[email protected][email protected]__k5ytiyfdwfigfzaew67zvechhm/node_modules/
wagmi/dist/chains.js
Error: It's currently unsupported to use "export *" in a client boundary.
Please use named exports instead.
Import trace for requested module:
./node_modules/.pnpm/[email protected]_@[email protected][email protected]_immer@
[email protected][email protected]__k5ytiyfdwfigfzaew67zvechhm/node_modules/
wagmi/dist/chains.js
./app/(root)/layout.tsx
