[bug] ⨯ TypeError: (0 , _rainbow_me_rainbowkit__WEBPACK_IMPORTED_MODULE_1__.getDefaultConfig) is not a function

[lexuandaibn123]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

2.2.4

wagmi Version

2.14.11

Current Behavior

I encountered a familiar error: ⨯ TypeError: (0 , rainbow_me_rainbowkit__WEBPACK_IMPORTED_MODULE_1_.getDefaultConfig) is not a function.

It occurs when I'm running on localhost and integrating authentication with Next.js. This error doesn't happen if I don't authenticate messages from the user's wallet. I am using t3-app to build my application, and I suspect that calling import { publicClient } from "@/lib/wagmi"; and using it in the backend is causing the config variable in wagmi.ts to be re-initialized on the backend, leading to this error. I tried logging the config variable before the error occurs, and it looks completely normal.

/// wagmi.ts
import { getDefaultConfig } from "@rainbow-me/rainbowkit";
import {
  arbitrum,
  base,
  mainnet,
  optimism,
  polygon,
  sepolia,
  celoAlfajores,
  manta,
  mantaSepoliaTestnet,
} from "wagmi/chains";

import { env } from "@/env";

import { publicActions } from "viem";

export const config = getDefaultConfig({
  appName: "SnapPoll",
  projectId: env.NEXT_PUBLIC_REOWN_PROJECT_ID,
  chains: [
    mainnet,
    polygon,
    optimism,
    arbitrum,
    manta,
    base,
    ...(env.NEXT_PUBLIC_NETWORK === "Testnet"
      ? [sepolia, celoAlfajores, mantaSepoliaTestnet]
      : []),
  ],
});

export const publicClient = config.getClient().extend(publicActions);

/// provider
"use client";

import React from "react";
import "@rainbow-me/rainbowkit/styles.css";

import {
  RainbowKitProvider,
  darkTheme,
  lightTheme,
} from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import { config } from "@/lib/wagmi";
import { RainbowKitSiweNextAuthProvider } from "@rainbow-me/rainbowkit-siwe-next-auth";

export default function EVMContext({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <WagmiProvider config={config}>
      <RainbowKitSiweNextAuthProvider>
        <RainbowKitProvider
          appInfo={{
            appName: "SnapPoll",
            learnMoreUrl: "https://snappoll.gitbook.io/snappoll-documents",
          }}
          theme={{
            lightMode: lightTheme(),
            darkMode: darkTheme(),
          }}
        >
          {children}
        </RainbowKitProvider>
      </RainbowKitSiweNextAuthProvider>
    </WagmiProvider>
  );
}

/// server/auth.ts(trpc)
export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(db) as Adapter,
  providers: [
    GoogleProvider({
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
      // allowDangerousEmailAccountLinking: true,
      authorization: {
        params: {
          prompt: "consent",
          access_type: "offline",
          scope: "openid profile email",
          session: {
            strategy: "jwt",
          },
        },
      },
    }),
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        message: {
          label: "Message",
          placeholder: "0x0",
          type: "text",
        },
        signature: {
          label: "Signature",
          placeholder: "0x0",
          type: "text",
        },
      },
      async authorize(credentials, req) {
        if (!credentials) return null;

        const siweMessage = parseSiweMessage(
          credentials?.message,
        ) as SiweMessage;

        if (
          !validateSiweMessage({
            address: siweMessage?.address,
            message: siweMessage,
          })
        ) {
          return null;
        }

        const nextAuthUrl = env.NEXTAUTH_URL;
        if (!nextAuthUrl) {
          return null;
        }

        const nextAuthHost = new URL(nextAuthUrl).host;
        if (siweMessage.domain !== nextAuthHost) {
          return null;
        }

        if (
          siweMessage.nonce !==
          (await getCsrfToken({ req: { headers: req.headers } }))
        ) {
          return null;
        }

        const valid = await verifyMessage({
          address: siweMessage?.address,
          message: credentials?.message,
          signature: credentials?.signature as 0x${string},
        });

        if (!valid) {
          return null;
        }
        return Container.get(UserService).loginWithWallet(
          siweMessage?.address,
          "eip155",
        );

[linear]

RK-142 [bug] ⨯ TypeError: (0 , _rainbow_me_rainbowkit__WEBPACK_IMPORTED_MODULE_1__.getDefaultConfig) is not a function