[bug] pnpm build error

[mystist]

Is there an existing issue for this?

• 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 [email protected] @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/[email protected]_@[email protected][email protected][email protected]_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.

[mystist]

You may still need the ssr functionality to be work thus result in this solution below:

import { mainnet, scroll, sepolia } from 'viem/chains'
import { cookieStorage, createConfig, createStorage, http } from 'wagmi'

let config = null

if (typeof window !== 'undefined') {
  ;(async () => {
    const [{ connectorsForWallets }, { walletConnectWallet }] = await Promise.all([import('@rainbow-me/rainbowkit'), import('@rainbow-me/rainbowkit/wallets')])

    const connectors = connectorsForWallets(
      [
        {
          groupName: 'Mobile compat',
          wallets: [walletConnectWallet],
        },
      ],
      {
        appName: 'dapp',
        projectId: 'edd4a3a6d5256ef234836b3b30a2c000',
      },
    )

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

export { config }

[mystist]

Reopen the issue, if it can only read the config in the client component, the ssr workflow won't work properly, meaning the flash of "empty" data before hydration will happen.

// this line of code should run in server component to resolve the flash issue
// however, rainbowkit like connectorsForWallets can only be used in client side, thus the config can't read from server here
const basicInitialState = cookieToInitialState(config, headers().get('cookie'))

[mystist]

The final changes I did:

Get rid of the ssr workflow as the rainbowkit can only be running in the client component. It will always be a flash of "empty" in that case.
To avoid that, a dynamic import might help, thus you can provide a loading spinner before it is loaded.

Please consider and support this ssr case🙏