TypeError: (0 , wagmi_providers_public__WEBPACK_IMPORTED_MODULE_2__.publicProvider) is not a function

[linghuccc]

I am trying to write an example project by following the codes in Wagmi official site: https://wagmi.sh/examples/connect-wallet.

`layout.js :

import Providers from './providers'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
return (



{children}



)
}
`

`Providers.js :

import { WagmiConfig, createConfig, configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'

import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'
import { InjectedConnector } from 'wagmi/connectors/injected'
import { MetaMaskConnector } from 'wagmi/connectors/metaMask'
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'

// Configure chains & providers with the Alchemy provider.
// Two popular providers are Alchemy (alchemy.com) and Infura (infura.io)
const { chains, publicClient, webSocketPublicClient } = configureChains(
[mainnet],
[publicProvider()]
)

// Set up wagmi config
const config = createConfig({
autoConnect: true,
connectors: [
new MetaMaskConnector({ chains }),
new CoinbaseWalletConnector({
chains,
options: {
appName: 'wagmi',
},
}),
new WalletConnectConnector({
chains,
options: {
projectId: 'my-projectId',
},
}),
new InjectedConnector({
chains,
options: {
name: 'Injected',
shimDisconnect: true,
},
}),
],
publicClient,
webSocketPublicClient,
})

// Pass config to React Context Provider
export default function Providers({ children }) {
const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])

return (
    <WagmiConfig config={config}>
        {mounted && children}
    </WagmiConfig>
)

}
`

But below error persists:
⨯ app/components/providers.js (15:19) @ publicProvider
⨯ TypeError: (0 , wagmi_providers_public__WEBPACK_IMPORTED_MODULE_2__.publicProvider) is not a function
at eval (webpack-internal:///(rsc)/./app/components/providers.js:26:75)
at (rsc)/./app/components/providers.js (/home/richard/my_tests/wagmi_test/.next/server/app/page.js:371:1)
at webpack_require (/home/richard/my_tests/wagmi_test/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///(rsc)/./app/layout.js:10:79)
at (rsc)/./app/layout.js (/home/richard/my_tests/wagmi_test/.next/server/app/page.js:382:1)
at Function.webpack_require (/home/richard/my_tests/wagmi_test/.next/server/webpack-runtime.js:33:42)
at runNextTicks (node:internal/process/task_queues:60:5)
at listOnTimeout (node:internal/timers:538:9)
at process.processTimers (node:internal/timers:512:7)
at async eq (/home/richard/my_tests/wagmi_test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400981)
at async tr (/home/richard/my_tests/wagmi_test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:404747)
at async tn (/home/richard/my_tests/wagmi_test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:405297)
at async tu (/home/richard/my_tests/wagmi_test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:409639)
at async /home/richard/my_tests/wagmi_test/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:410158 {
digest: '474837914',
page: '/'
}
13 | const { chains, publicClient, webSocketPublicClient } = configureChains(
14 | [mainnet],

15 | [publicProvider()]
| ^

I really have no idea what happened. Can any guru kindly point out where the issue comes from?

Thank you very much!

[RandolphJiffy]

you can try "use client" in first line，i have same problem with you and slove it。

"use client"
import { WagmiConfig, createConfig, configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'

[linghuccc]

Thank you! Your suggestion indeed solved this error. Although I run into other error after that, but this error is sure solved.

[DORTROX]

Thank you! Your suggestion indeed solved this error. Although I run into other error after that, but this error is sure solved.

Probably an issue with incompatibility of usestate? better way to use client components is my importing them as different file.

[bayurzxsmtp]

Awesome! Knowing this was as a result of 'use client' fixed my issue. I would also like to drop a hint. I ran into this error trying to use a provider at the html level. Note that you can't use "use client" at this level so what you can do it create a separate component and use it like it was used in this example

  // src/providers/WagmiProviderClient.tsx    OR      src/components/WagmiProviderClient.tsx

'use client';

import React from 'react';
import { RainbowKitProvider, connectorsForWallets, ConnectButton } from '@rainbow-me/rainbowkit';
import { injectedWallet, /* walletConnectWallet,*/ metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';
import { WagmiConfig } from 'wagmi';
import { chains, wagmiConfig } from '@/lib/dapps/wagmiConfig';

const WagmiProviderClient: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    return (
        <WagmiConfig config={wagmiConfig}>
            <RainbowKitProvider chains={chains} initialChain={365}>
                {children}
            </RainbowKitProvider>
        </WagmiConfig>
    );
};

export default WagmiProviderClient;

You layout will look like this

// other code stuff
...
import WagmiProviderClient from "../providers/wagmiProviderClient";

const inter = Inter({ subsets: ["latin"] });

// mroe code stuff
...
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${inter.className} bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300`}>
        <ThemeProvider>
          <OauthProviders>

            <WagmiProviderClient>

              <div className="flex flex-col min-h-screen">

                <NavbarTaiwind />
                <main className="flex-grow">
                  <div className="container mx-auto flex justify-center items-start min-h-screen">


                    {children}
                  </div>
                </main>

              </div>
            </WagmiProviderClient>


          </OauthProviders>
        </ThemeProvider>
      </body>
    </html >
  );
}