[bug] pnpm build error

[mystist]

Is there an existing issue for this?

• [X] I have searched the existing issues

RainbowKit Version

^2.1.7

wagmi Version

^2.12.17

Current Behavior

Error when run pnpm build on a refresh new nextjs project use pnpm create next-app@rc --turbo with ts, app router, without src folder.

Installed deps with: pnpm add @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query

Use code below and run pnpm build will get error:

 ✓ Linting and checking validity of types    
   Collecting page data  ..TypeError: (0 , b.a3) is not a function
    at 84781 (/Users/liber/home/git/mystist/my-app/.next/server/chunks/386.js:1:3600)
    at t (/Users/liber/home/git/mystist/my-app/.next/server/webpack-runtime.js:1:143)
    at 76302 (/Users/liber/home/git/mystist/my-app/.next/server/app/_not-found/page.js:1:1367)
    at t (/Users/liber/home/git/mystist/my-app/.next/server/webpack-runtime.js:1:143)
    at r (/Users/liber/home/git/mystist/my-app/.next/server/app/_not-found/page.js:1:3402)
    at /Users/liber/home/git/mystist/my-app/.next/server/app/_not-found/page.js:1:3439
    at t.X (/Users/liber/home/git/mystist/my-app/.next/server/webpack-runtime.js:1:1285)
    at /Users/liber/home/git/mystist/my-app/.next/server/app/_not-found/page.js:1:3415
    at Object.<anonymous> (/Users/liber/home/git/mystist/my-app/.next/server/app/_not-found/page.js:1:3467)
    at Module._compile (node:internal/modules/cjs/loader:1469:14)
TypeError: (0 , b.a3) is not a function
    at 84781 (/Users/liber/home/git/mystist/my-app/.next/server/chunks/386.js:1:3600)
    at t (/Users/liber/home/git/mystist/my-app/.next/server/webpack-runtime.js:1:143)
    at 47147 (/Users/liber/home/git/mystist/my-app/.next/server/app/page.js:1:1670)
    at t (/Users/liber/home/git/mystist/my-app/.next/server/webpack-runtime.js:1:143)
    at r (/Users/liber/home/git/mystist/my-app/.next/server/app/page.js:6:29159)
    at /Users/liber/home/git/mystist/my-app/.next/server/app/page.js:6:29196
    at t.X (/Users/liber/home/git/mystist/my-app/.next/server/webpack-runtime.js:1:1285)
    at /Users/liber/home/git/mystist/my-app/.next/server/app/page.js:6:29172
    at Object.<anonymous> (/Users/liber/home/git/mystist/my-app/.next/server/app/page.js:6:29224)
    at Module._compile (node:internal/modules/cjs/loader:1469:14)

> Build error occurred
Error: Failed to collect page data for /_not-found
    at /Users/liber/home/git/mystist/my-app/node_modules/.pnpm/next@15.0.0-rc.0_@babel+core@7.25.8_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f_4zf2c7gvqlwonzs7rvjbajrs7y/node_modules/next/dist/build/utils.js:1274:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
   Collecting page data  . ELIFECYCLE  Command failed with exit code 1.

code here:

//config/index.ts
import { connectorsForWallets } from "@rainbow-me/rainbowkit";
import { rainbowWallet, walletConnectWallet } from "@rainbow-me/rainbowkit/wallets";
import { mainnet, scroll, sepolia } from 'viem/chains'
import { cookieStorage, createConfig, createStorage, http } from 'wagmi'
import { injected } from 'wagmi/connectors'

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [rainbowWallet, walletConnectWallet],
    },
  ],
  {
    appName: 'My RainbowKit App',
    projectId: 'YOUR_PROJECT_ID',
  }
);

export const config = createConfig({
  chains: [mainnet, sepolia, scroll],
  connectors: [injected()],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
    [scroll.id]: http(),
  },
  ssr: true,
  storage: createStorage({ storage: cookieStorage }),
})

// layout.tsx
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { config } from "@/config";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
});

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

const queryClient = new QueryClient();

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        <WagmiProvider config={config}>
          <QueryClientProvider client={queryClient}>
              {children}
          </QueryClientProvider>
        </WagmiProvider>
      </body>
    </html>
  );
}

Expected Behavior

No response

Steps To Reproduce

No response

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

No response

Anything else?

No response

[mystist]

Remove any client side import from layout.tsx resolves the problem. Including the wagmi ssr cookie use case.

If you need the ssr logic, check the other code which can only works in client mode, in my case, I should add 'use client' in my config.ts cause I have the rainbowkit logic there.