[bug] Error when using `connectorsForWallets` to create connectors object in `cookieToInitialState` by wagmi

[DaYuan]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

2.1.0

wagmi Version

2.9.2

Current Behavior

I encountered an error when using connectorsForWallets to create connectors object while passing wagmiConfig in cookieToInitialState.

When trying to use connectorsForWallets to create the connectors object, I receive an error indicating that connectorsForWallets is not a function.

I'm sure it's at the stage const initialState = cookieToInitialState(wagmiConfig, cookie); error occurred

Expected Behavior

The connectors object should be correctly created using connectorsForWallets without any errors.

Steps To Reproduce

1. Use the web3-nextjs-template
2. Configure wagmiConfig as shown above.
3. Try to use cookieToInitialState with wagmiConfig.

import { cookieToInitialState } from 'wagmi';
const initialState = cookieToInitialState(wagmiConfig, cookie);

import { connectorsForWallets } from '@rainbow-me/rainbowkit';

const connectors = (connectorsForWallets as CreateConnectorFn[0] | undefined)(
  [
    {
      groupName: 'Recommended',
      wallets: [rainbowWallet, walletConnectWallet],
    },
    {
      groupName: 'Suggested',
      wallets: [
        metaMaskWallet,
      ],
    },
  ],
  { appName: 'App', projectId: '......' },
);

const wagmiConfig = createConfig({
  connectors,
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
  storage: createStorage({
    storage: cookieStorage,
  }),
  ssr: true,
});

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

"@rainbow-me/rainbowkit": "^2.1.0",
    "@rainbow-me/rainbowkit-siwe-next-auth": "^0.4.1",
    "@solana/web3.js": "^1.91.8",
    "@tanstack/react-query": "^5.36.2",
    "@tanstack/react-query-devtools": "^5.37.1",
    "@web3modal/wagmi": "^4.2.1",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "ethers": "^6.12.1",
    "iron-session": "^8.0.1",
    "lucide-react": "^0.274.0",
    "next": "latest",
    "next-auth": "5.0.0-beta.18",
    "phantom-wagmi-connector": "^1.0.7",
    "prisma": "^5.14.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "siwe": "^2.3.2",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7",
    "viem": "2.x",
    "wagmi": "^2.9.2"

[MK]

@CS6 It seems like you're trying to use wagmiConfig in a server component. Remember next js app router uses both server and client components which means you'd have to make sure that Provider.tsx file is used as a client component. This can be achieved by adding 'use client' on top of your Provider.tsx file.

Here is an example: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-app/app/providers.tsx#L1

Let me know if this works 👍

[DaYuan]

@magiziz
I have resolved the issue by adjusting the order of the providers and adding 'use client'; at the top of the relevant file.
Thanks for your support!