[bug] Build fails in monorepo

[neel-ds]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

2.0.0

wagmi Version

2.5.7

Current Behavior

It works well in an isolated new app. I tried implementing it in Monorepo, and it works well but the build fails due to a type error from the package. I think it's maybe due to wagmi/core. I have followed the docs exactly with the Next App Router Sandbox example.

Expected Behavior

No response

Steps To Reproduce

No response

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

No response

Anything else?

No response

[magiziz]

@neel-ds Just to confirm is this the RainbowKit's monorepo or is this your one ? Also what pnpm version are you using ?

[neel-ds]

@neel-ds Just to confirm is this the RainbowKit's monorepo or is this your one ? Also what pnpm version are you using ?

In my monorepo. pnpm version: 8.3.1

[magiziz]

@neel-ds Since you're using next.js app router can i have a look at your provider code ? Since you need to define 'use-client' at the root of your provider like this.

The reason for this is because next.js app router uses server components and client components. Wagmi and RainbowKit configuration need to use client components.

If this doesn't work please can i get a small reproducible example ?

[neel-ds]

@kosmoskey Yes! I defined 'use-client'. Please check the attached screenshot of provider.tsx which is imported in layout.

For your reference:

dependencies: {     
        "@rainbow-me/rainbowkit": "^2.0.0",
        "@tanstack/react-query": "^5.20.5",
        "viem": "~2.7.10",
        "wagmi": "^2.5.7"
}
versions: {
        "node": v20.11.1
        "pnpm": 8.3.1
}

apps/web/src/app/provider.tsx

[magiziz]

@neel-ds Can you put the config and queryClient above the Provider component ? Like this

[magiziz]

@neel-ds It would be super helpful to get a small reproducible example since i have no idea what exactly is wrong with the code you have. Would a small reproducible example be possible ?

[neel-ds]

@kosmoskey Thank you so much for the help! I have updated it according to the reference but it still fails in vercel.

@neel-ds Can you put the config and queryClient above the Provider component ? Like this

Updated codebase:

Please check the build log:

[magiziz]

@neel-ds Are you able to share a small reproducible example ? Just a github code or codesandbox would be great.

Since i only know your package.json and providers.tsx. I can't really reproduce this issue on my end.

[neel-ds]

Here, you can find a reproducible example.

Steps to reproduce

Please try to build the project by following command

npm run build

Current behaviour in build:

[magiziz]

@neel-ds Please update your next.config.js to avoid any polyfill issues. Here is the code:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false, net: false, tls: false };
    config.externals.push('pino-pretty', 'lokijs', 'encoding');
    return config;
  },
};

module.exports = nextConfig;

Since you're using server-side rendering make sure to add ssr: true to your getDefaultConfig function like this:

const config = getDefaultConfig({
  appName: 'Build Issue',
  projectId: 'YOU_PROJECT_ID',
  chains: [goerli],
  ssr: true, // <- this
});

[neel-ds]

Thank you very much. It solves the issue.