next.js13wallet-connectwagmiweb3modal

WalletConnect Web3modal Wagmi in Nextjs: Type 'Config<any, any> & { queryClient: QueryClient; }' is not assignable to type 'Config<any, any>'

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:

Installing New Dependencies: pnpm add @web3modal/wagmi wagmi viem

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/wagmi@1.4.5_@types+react@18.2.28_bufferutil@4.0.8_immer@
10.0.3_react-dom@18.2.0_react@18.2.0__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/wagmi@1.4.5_@types+react@18.2.28_bufferutil@4.0.8_immer@
10.0.3_react-dom@18.2.0_react@18.2.0__k5ytiyfdwfigfzaew67zvechhm/node_modules/
wagmi/dist/chains.js
./app/(root)/layout.tsx
Solution 
  • const wagmiConfig = createConfig({
  autoConnect: true,
  connectors,
  publicClient,
  webSocketPublicClient,
});

export function RainbowKitProviders({ children }: { children: React.ReactNode }) {
  return (
    <WagmiConfig config={wagmiConfig}>
      <RainbowKitProvider >
        {children}
      </RainbowKitProvider>
    </WagmiConfig>
  );
}