[bug] Error: To use QR modal, please install @walletconnect/modal package

[nakedfool]

Is there an existing issue for this?

• [X] I have searched the existing issues

RainbowKit Version

2

wagmi Version

2.5.7

Current Behavior

When configuring connectors in a wagmi setup to include various wallets, including walletConnectWallet, the build process fails with an error message indicating the absence of the @walletconnect/modal package. This issue arises during the build phase, specifically when walletConnectWallet is listed among the connectors. Removing walletConnectWallet from the configuration removes the error, pinpointing the cause to the WalletConnect integration.

This is the exact error message Error: To use QR modal, please install @walletconnect/modal package

This is how i define connectors in wagmi config file

const connectors = connectorsForWallets(
  [
    {
      groupName: "Wallets",
      wallets: [
        metaMaskWallet,
        walletConnectWallet,
        rainbowWallet,
        okxWallet,
        tahoWallet,
        coinbaseWallet,
        argentWallet,
        trustWallet,
        imTokenWallet,
        omniWallet,
        bitgetWallet,
        rabbyWallet,
        phantomWallet,
      ],
    },
  ],
  {
    projectId: projectId,
    appName: appName,
  },
);

Expected Behavior

The build process completes successfully without requiring the explicit addition of @walletconnect/modal package

Even if i install missing package, build still fails.

Steps To Reproduce

No response

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

No response

Anything else?

No response

[magiziz]

@nakedfool Thanks for raising this issue.

May i ask you if you're using a VPN or if your dApp runs in a preview environment ? Are you testing this on localhost ?

Would be good to know what framework or library you're using as well since it might be a webpack issue as well 👀

[GMGNAI]

I'm facing the same issue. I'm using a Next.js React project with the following package details:

 "@rainbow-me/rainbowkit": "2.0.0",
"viem": "^2.7.3",
"wagmi": "^2.5.5"

[nakedfool]

@nakedfool Thanks for raising this issue.

May i ask you if you're using a VPN or if your dApp runs in a preview environment ? Are you testing this on localhost ?

Would be good to know what framework or library you're using as well since it might be a webpack issue as well 👀

Hi @KosmosKey!

I'm not using any VPN, i'm using a nextjs react app and it fails in vercel preview deployment.

Testing in localhost, build fails locally and during vercel deployment.

[magiziz]

@nakedfool I can't reproduce this on my end. This seems more of a webpack build issue where it might ignore one of the dependencies during build time.

Are you able to share your webpack configuration or next.config.js ?

[nakedfool]

@KosmosKey sure!

here is my next.config.js

const withPWA = require("next-pwa");

const nextConfig = {
  reactStrictMode: false,
  i18n: {
    locales: ["en-US"],
    defaultLocale: "en-US",
  },
  webpack: config => {
    config.resolve.fallback = { fs: false, net: false, tls: false };
    return config;
  },
  images: {
    domains: ["lens.infura-ipfs.io", "ik.imagekit.io"],
  },
  transpilePackages: ["react-tweet"],
};

module.exports = withPWA({
  dest: "public",
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === "development",
  maximumFileSizeToCacheInBytes: 10 * 1024 * 1024, // 5mb
})(nextConfig);

[magiziz]

@nakedfool Can you share a small reproducible example ? Seems like it works for me.

[nakedfool]

@nakedfool Can you share a small reproducible example ? Seems like it works for me.

Huh, i'll try to reproduce issue but it feels like it can be a webpack build issue?

[nakedfool]

I'm facing the same issue. I'm using a Next.js React project with the following package details:

 "@rainbow-me/rainbowkit": "2.0.0",
"viem": "^2.7.3",
"wagmi": "^2.5.5"

Let me know if you figured it out!

[magiziz]

@nakedfool Can you share a small reproducible example ? Github code or codesandbox link would be enough

[nakedfool]

@nakedfool Can you share a small reproducible example ? Github code or codesandbox link would be enough

I'm only able to share code here https://github.com/jk-labs-inc/jokerace/tree/chore/upgrade-to-wagmi-v2 as reproducing it won't make sense in current situation :/

[glitch-txs]

it won't make sense in current situation

why not? it's really hard to help without a minimal repro >.<

[nakedfool]

it won't make sense in current situation

why not? it's really hard to help without a minimal repro >.<

Hm i think because of the number of dependencies that are in my project, however, i'll try to reproduce it and install all of them in a single repo and share here!

[glitch-txs]

are you bundling this into a package?

[magiziz]

@nakedfool Are you able to setup a fresh new RainbowKit and Wagmi project and try to write the same code and then share it here ? It'd really helpful if you could do that since i can then help you to see what's going on 🙏

[nakedfool]

@nakedfool Are you able to setup a fresh new RainbowKit and Wagmi project and try to write the same code and then share it here ? It'd really helpful if you could do that since i can then help you to see what's going on 🙏

yeah, i'll do it this week and post here! sounds good?

[magiziz]

@nakedfool Sounds awesome! Thanks 🙏

[nakedfool]

@KosmosKey

could this actually be due to wagmi/connectors package itself?

Error: To use QR modal, please install @walletconnect/modal package
    at I.initialize (E:\jokerace\node_modules\@wagmi\connectors\node_modules\@walletconnect\ethereum-provider\dist\index.cjs.js:1:7377)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Function.init (E:\jokerace\node_modules\@wagmi\connectors\node_modules\@walletconnect\ethereum-provider\dist\index.cjs.js:1:2743)

not sure actually on which package this dependency fails, but if i remove custom connectors and try walletConnect from wagmi/connectors build would still fail.

i'm using wagmi/core so i had to install wagmi/connectors as well

[magiziz]

@KosmosKey Why not just installing wagmi directly and import connectors from wagmi/connectors ? Could you send me the code so i can have a look ?

[nakedfool]

Yeah even if i uninstall wagmi/connectors error is still the same as one above, this is still me debugging from the main repo.

I'll create basic repo with these dependencies until end of week :)

[nakedfool]

@KosmosKey

Here is the small repo that i've just bootstraped with create-rainbowkit https://github.com/nakedfool/jokerace-test-dependencies

Run it and you should be able to see exact error above with the config in wagmi.ts

[magiziz]

@nakedfool Can you add ssr field to true in createConfig function like this ?

export const config = createConfig({
  connectors: connectors,
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
  ssr: true, // <- add 'true' here
});

[nakedfool]

@nakedfool Can you add ssr field to true in createConfig function like this ?

export const config = createConfig({
  connectors: connectors,
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
  ssr: true, // <- add 'true' here
});

hell yeah, this is it! thank youuuuuuuu :)

[nakedfool]

Hey @magiziz

While the ssr: true resolved the build, some hooks like useAccount are returning now undefined during page load, which is because of the ssr enabled

Any different way that this build error can be solved?

[magiziz]

@nakedfool This shouldn't happen. useAccount should never return undefined, more info here. Did you wrap your <WagmiProvider>, <RainbowKitProvider> and <QueryClientProvider> in the right order ? Can you please share your code ?

[glitch-txs]

Use cookies as storage

https://wagmi.sh/react/guides/ssr

[glitch-txs]

Yeah you need the wagmi provider which hydrates the store if you're using the SSR flag

[nakedfool]

Yeah you need the wagmi provider which hydrates the store if you're using the SSR flag

Oh i see, much thanks for research & help here!

It looks like they only have an example for the nextjs app router, they still do not have an example for the pages router, i'll see if i can find a solution!