[BUG]: Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

[petermazzocco]

Describe the bug

The specific error I am receiving is: Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function at eval (webpack-internal:///(rsc)/./node_modules/framer-motion/dist/es/context/LazyContext.mjs:8:71) and occurs on any latest Nextjs build with Connectkit, wagmi and viem. It seems to do with the node modules missing framer-motion as each node module error relates to framer-motion. I've done no additional configuration outside of the Connectkit standard documentation

To reproduce

Any build with the latest Nextjs (currently 14.2.1) and the latest of Connectkit (1.7.3), wagmi(2.5.20) and viem(2.5.20) can reproduce this. This is the second repo I've now had this issue with, and the initial one I removed Connectkit and it seemed to fix the errors.

Expected behavior
Initial configuration

Screenshots
Here's a screenshot of the error and the screenshot of my providers.tsx page

Environment details

OS is Arc Browser with Mac OS Sonoma.

Additional context

N/A

[petermazzocco]

UPDATE:

It seems it's related to the <ConnectKitButton /> component that get's added to the providers file. When that is removed, the error goes away.

[lochie]

It seems it's related to the <ConnectKitButton /> component that get's added to the providers file. When that is removed, the error goes away.

hey @petermazzocco, i dont see <ConnectKitButton /> used in your example?
<ConnectKitButton /> needs to be used outside of the providers direct file (but still wrapped within the provider), as it cannot see the wagmi context when used in this way.

[petermazzocco]

Omg I feel so awful but I completely forgot about client vs server and I needed to place the ConnectKitButton in a client component lol

I feel dumb 😭

[lochie]

@petermazzocco happens to the best of us!

[montanaflynn]

I'm also getting this error, not sure about <ConnectKitButton/> because everything is working fine until I follow:

https://wagmi.sh/react/guides/ssr#persistence-using-cookies

Here's my provider.tsx:

'use client'

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ConnectKitProvider } from 'connectkit'
import { type ReactNode } from 'react'
import { WagmiProvider, type State } from 'wagmi'

import { config } from '~/config/wagmi'

const queryClient = new QueryClient()
export function Web3Provider(props: {
    children: ReactNode
    initialState: State | undefined
}) {
    return (
        <WagmiProvider config={config}>
            <QueryClientProvider client={queryClient}>
                <ConnectKitProvider>{props.children}</ConnectKitProvider>
            </QueryClientProvider>
        </WagmiProvider>
    )
}

Here's my config.ts

import { getDefaultConfig } from 'connectkit'
import { cookieStorage, createConfig, createStorage, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig(
    getDefaultConfig({
        appName: '....',
        chains: [mainnet, sepolia],
        ssr: true,
        storage: createStorage({
            storage: cookieStorage,
        }),
        walletConnectProjectId:
            process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
        transports: {
            [mainnet.id]: http('https://....'),
            [sepolia.id]: http('https://....'),
        },
    })
)

declare module 'wagmi' {
    interface Register {
        config: typeof config
    }
}

And this is the line of code causing the error:

const initialState = cookieToInitialState(config, headers().get('cookie'))

[petermazzocco]

Add use client to your ConnectKitButton if you're doing a custom one like me, or if you're passing it into a Nav component

[montanaflynn]

Even when removing everything I get the same error:

Here's the layout.tsx:

import '~/app/globals.css'

import { headers } from 'next/headers'
import { cookieToInitialState } from 'wagmi'

import { config } from '~/config/wagmi'
import { Web3Provider } from '~/providers/web3'

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    const initialState = cookieToInitialState(config, headers().get('cookie'))
    return (
        <html lang="en" suppressHydrationWarning>
            <body>
                <Web3Provider initialState={initialState}>
                    <main>{children}</main>
                </Web3Provider>
            </body>
        </html>
    )
}

And the page.tsx:

export default async function Page() {
    return <>hello</>
}

[petermazzocco]

Where are you passing your Connect wallet button?

[montanaflynn]

I removed it in the code above, but I was passing it in the page.tsx, and the default connect button. Let me try to make a reproduction and share that.

[lochie]

@montanaflynn this might be a better issue to report to the wagmi repo, as it sounds unrelated to connectkit if you're able to recreate this using just wagmi related configuration.

in saying that, feel free to share a reproduction, especially if you think it's a fault in connectkit

[petermazzocco]

If you ran it into the page.tsx with the async page, it will throw the error. All uses of the connect button needs to be in a client component with the use client directory at the top. Passing it into a page.tsx without any directory makes it a server function so remove the async from the page and add use client.

[montanaflynn]

@lochie The issue only happens when I use getDefaultConfig from connectkit, if I use the plain wagmi config no issues.

@petermazzocco thanks, I'll look into that, all the new client / server stuff is still a little over my head!

Working on a minimal repro now!

[petermazzocco]

It's most likely the issue. When it comes to web3 related projects, almost all pages or components will need to be client driven

[montanaflynn]

Here's a reproduction, I believe everything is client except the layout which can't be due to getting the cookie.

https://github.com/montanaflynn/wagmi-connectkit-repro

Specifically take a look at this file which is what causes the error, if I change it to the commented out config declaration then the page works (even with connectkit button)

Edit: Here's it running in codesandbox: https://codesandbox.io/p/github/montanaflynn/wagmi-connectkit-repro/main?file=%2Fsrc%2Fconfig%2Fwagmi.ts

[petermazzocco]

Try removing the main tag in the layout.tsx

[montanaflynn]

No difference when removing that.

[seeARMS]

Encountering the same issue in #407 when attempting to set initialState with cookies, as per Wagmi persistence docs.