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

[christopheSeeka]

Hello, trying to move from walletconnect v1 to v2 with basic implementation of walletconnect provider for web3js as follow:

npm install @walletconnect/ethereum-provider @walletconnect/modal

import { EthereumProvider } from '@walletconnect/ethereum-provider'
import { WalletConnectModal } from '@walletconnect/modal'

const login = async function(){
   const provider = await EthereumProvider.init({
      projectId: '*********',
      chains: [8001],
      showQrModal: true
    })
   await provider.enable();
   web3 = new Web3(provider)
   const accounts = await web3.eth.getAccounts();
   chain_conf.ethAccount = accounts[0];
 }

But im constantly getting this error: Error: To use QR modal, please install @walletconnect/modal package

even though i installed @walletconnect/modal package, any idea what i'm missing please?

[ganchoradkov]

hey, please follow the error message and install @walletconnect/modal in your project. It's triggered by showQrModal: true

[christopheSeeka]

Well, it is exactly what i do since hours, "sudo npm install @walletconnect/modal" but i still constantly get this error so i really don't know what else i can do, if i sudo npm list @walletconnect/modal i get the following:

├─┬ @walletconnect/ethereum-provider@2.10.4
│ └── @walletconnect/modal@2.6.2 deduped
└── @walletconnect/modal@2.6.2

[ganchoradkov]

please check that you have latest versions installed. I'm unabled to reproduce and my package json looks like

    "@walletconnect/ethereum-provider": "2.10.4",
    "@walletconnect/modal": "^2.6.2",

this is the example app I'm testing with https://github.com/WalletConnect/se-sdk/tree/main/examples/dapp

if I remove @walletconnect/modal, I get the same error as you. If I add the @walletconnect/modal, the modal shows as expected

[christopheSeeka]

I really don't understand, it is installed for sure, anyway, it can only be on my side i guess, will try figure it and update if it's something worthy when i hopefully find the issue :)

[ganchoradkov]

@christopheSeeka feel free to provide a repo where we could reproduce the issue and help resolving it

[christopheSeeka]

It actually work locally on my desktop but not on my server while i pull/install the exact same code. Ill try share a simplified version tomorrow if i cant figure it 😊

[christopheSeeka]

So basically it work when i'm running npm run dev (vue 3/ vite project) but in prod, as i point directly to the dist build, it doesnt find the module. Any idea why it is not compiled in the build/dist despite running npm run build?

If i import the module in my code before i build and console log it, it's compiled and found in my code:

but the Ethereum-provider require don't find it since the require("@walletconnect/modal").WalletConnectModal is as such in the final build file.js

[christopheSeeka]

Wouldnt this make more sens than a require() in the package? since we have to install the modal module anyway.

import { EthereumProvider } from '@walletconnect/ethereum-provider'
import { WalletConnectModal } from '@walletconnect/modal'

const provider = await EthereumProvider.init({
    projectId: '*********',
    chains: [8001],
    showQrModal: WalletConnectModal
})

In terms of bundling it would fixe the problem i believe.

[christopheSeeka]

Here the sample:

you can pull the repo: https://github.com/christopheSeeka/wc-example/tree/master

rename the sample.env to .env (nothing important in it, it's testing testnet api key, ill change them later) npm install npm run dev to start the dev environment open http://localhost:5000/ click connect The modal open correctly.

Now, npm run build, to build for prod then point to dist/ forlder with a local server to open the same page, click connect and get the console error saying the modal module is not found, because it's still includes require("@walletconnect/modal").WalletConnectModal in the bundled js.

[christopheSeeka]

@glitch-txs

[glitch-txs]

I was able to reproduce it, seems to be an issue with the bundler (vite) that is not compiling @walletconnect/modal correctly, probably because it's being dynamically imported in the library, so it's not supporting dynamic imports maybe? probably needs some config.

I created a workaround example using CDN or I'd also suggest using Web3Modal SDK instead

https://github.com/glitch-txs/vue-ethereum-provider

[glitch-txs]

Seems like we found the issue, well try to fix it in our end

[christopheSeeka]

Seems like we found the issue, well try to fix it in our end

Awesome, for now i'll stay with my (dirty) modified version of the lib until fixed, thank you very much.

[lv-xiaobu]

"@walletconnect/ethereum-provider": "2.10.1", `"@walletconnect/modal":`` "^2.6.0", I used this version to avoid this problem。

[ganchoradkov]

Hey everyone, the issue is resolved with this PR https://github.com/WalletConnect/walletconnect-monorepo/pull/3891, pending release

[meness]

I still get the exception on Vercel when I hard reload some pages only

[nfts2me]

We have the same problem as well.

Installed packages:

Error:

Error: To use QR modal, please install @walletconnect/modal package
    at I.initialize (ourinternalroute/node_modules/@walletconnect/ethereum-provider/dist/index.cjs.js:1:7377)

[ganchoradkov]

hey @nfts2me could you provide minimal repro example please?