search

rainbow-me / rainbowkit

The best way to connect a wallet 🌈 🧰
https://rainbowkit.com
MIT License
2.36k stars 617 forks source link

[bug] Peer dependency issue: react-i18next@13.5.0 ... Found i18next@22.5.1 #2054

Closed Spencer-Sch closed 2 weeks ago

Spencer-Sch commented 2 weeks ago

Is there an existing issue for this?

RainbowKit Version

2.1.2

wagmi Version

2.10.2

Current Behavior

After executing npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query to add RaindbowKit to existing Next.js project I get the following error:

overriding-peer-deps

When running npm run dev I get the following error:

module-not-found

The project builds and displays on localhost:3000. The RainbowKit ConnectWallet component renders and functions as expected.

Expected Behavior

I expected for Next.js to build and run locally without any dependency issues.

Steps To Reproduce

  1. init project with npx create-next-app@latest
  2. test local environtment by running npm run dev
  3. navigate to localhost:3000 in browser (I'm using Chrome)
  4. stop local environment with ctr+c then y then enter
  5. add RainbowKit with npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
  6. Add Wagmi, QueryClient, and RainbowKit providers (with Wallet Connect project id) and rainbowKit ConnectWallet component to project as directed by the RainbowKit documentation. (https://www.rainbowkit.com/docs/installation#import)
  7. run local environment with npm run dev
  8. navigate to localhost:3000 in browser (I'm using Chrome)

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

https://github.com/Spencer-Sch/next-rainbowkit-issue-recreation

Anything else?

Next.js with RainbowKit libs was all working properly last week. It was all working properly earlier today as well until I tried to add DaisyUI to the project. That's when I started seeing this peer dep conflict about i18. However, the issue has persisted even in brand new project installs without the addition of DaisyUI.

Package.json package-json

magiziz commented 2 weeks ago

@Spencer-Sch These are just peer dependencies warnings that are coming from @metamask/sdk dependency which is used by wagmi. Those warnings shouldn't cause any errors in your app.

Regarding your Can't resolve 'pino-pretty'... error, this comes from the WalletConnect SDK which is also used by wagmi. You would need to configure your next.config.js like this https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-app/next.config.js

Let me know if this helps 👍

Spencer-Sch commented 2 weeks ago

Thank you for your reply, @magiziz!

I wish I had known the warnings could be safely ignored before I spent multiple hours trying to solve it 🤦‍♂️.

That's ok though, because your suggestion about next.config.js has made all the "Import trace" and "Module not found" messages disappear!

Thank you again!