[bug] Rainbowkit needs all Wagmi's third-party connectors dependencies to be installed even if they are not used

[louis-md]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

2.2.10

wagmi Version

3.2.0

Current Behavior

Rainbowkit's latest versions force me to install all third-party connectors used by Wagmi (@metamask/sdk, @coinbase/wallet-sdk, porto,@gemini-wallet/core, @safe-global/safe-apps-provider, @walletconnect/ethereum-provider) whenever I import any single wallet (other than injected) from @rainbow-me/rainbowkit/wallets.

Expected Behavior

These packages should be required only if the associated connector or wallet is effectively used in Rainbowkit's configuration (as it is the case for wagmi).

For example, I should have to import @metamask/sdk only if I am importing { metaMaskWallet } from @rainbow-me/rainbowkit/wallets.

Steps To Reproduce

• pnpm add @rainbow-me/rainbowkit@latest @metamask/sdk
• import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets'`

-> Module not found: Can't resolve '@coinbase/wallet-sdk' (but also porto, @walletconnect/ethereum-provider, @gemini-wallet/core and @safe-global/safe-apps-provider)

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

No response

Anything else?

No response

[linear]

RK-211

[phelix001]

This issue is closely related to the wagmi v3 migration. PR #2627 (rebased today, now conflict-free) addresses the wagmi v3 compatibility.

For anyone hitting build failures due to the gemini connector not being exported from newer wagmi versions, you can use the pre-built wagmi v3 compatible fork:

npm install @rainbow-me/rainbowkit@github:phelix001/rainbowkit#v2.2.10-wagmi3

Release: https://github.com/phelix001/rainbowkit/releases/tag/v2.2.10-wagmi3

[louis-md]

While @phelix001's PR is getting merged, I found a workaround. Create a new file "wagmi-connectors.mjs" and add an alias to your webpack configuration (for example in next.config.mjs) like so:

  webpack: config => {
       config.resolve.alias = {
        ...config.resolve.alias,
        'wagmi/connectors$': path.resolve(
          __dirname,
          'path/to/custom/wagmi-connectors.mjs'
        )
    }
}

Where your custom wagmi-connectors.mjs contains:

export * from '@wagmi/connectors'

export const gemini = () => () => {
    console.error(
      'Gemini Wallet is not available because the installed wagmi build does not export the gemini connector.'
    )
  }

[DanielSinclair]

This is now resolved in the RainbowKit v3 release available later today

[agsola]

This is now resolved in the RainbowKit v3 release available later today

Where is RainbowKit 3?
I cannot find it.

[luisdelahoz]

This is now resolved in the RainbowKit v3 release available later today

I couldn't find it. Where is it?