Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug] Build fails in monorepo #1776

Closed
1 task done
neel-ds opened this issue Feb 17, 2024 · 11 comments
Closed
1 task done

[bug] Build fails in monorepo #1776

neel-ds opened this issue Feb 17, 2024 · 11 comments

Comments

@neel-ds
Copy link

neel-ds commented Feb 17, 2024

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.
Screenshot 2024-02-17 at 3 13 53 PM

Expected Behavior

No response

Steps To Reproduce

No response

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

No response

Anything else?

No response

@magiziz
Copy link
Contributor

magiziz commented Feb 18, 2024

@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
Copy link
Author

neel-ds commented Feb 18, 2024

@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
Copy link
Contributor

magiziz commented Feb 19, 2024

@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
Copy link
Author

neel-ds commented Feb 20, 2024

@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
Screenshot 2024-02-20 at 12 07 39 AM

@magiziz
Copy link
Contributor

magiziz commented Feb 20, 2024

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

@magiziz
Copy link
Contributor

magiziz commented Feb 20, 2024

@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
Copy link
Author

neel-ds commented Feb 21, 2024

@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:
Screenshot 2024-02-21 at 4 50 52 PM

Please check the build log:
Screenshot 2024-02-21 at 4 48 39 PM

@magiziz
Copy link
Contributor

magiziz commented Feb 21, 2024

@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
Copy link
Author

neel-ds commented Feb 22, 2024

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:
Screenshot 2024-02-22 at 5 27 34 PM

@magiziz
Copy link
Contributor

magiziz commented Feb 22, 2024

@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
Copy link
Author

neel-ds commented Feb 22, 2024

Thank you very much. It solves the issue.

@neel-ds neel-ds closed this as completed Feb 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants