WalletConnectV2 TypeError: w.default.init is not a function

[torreyatcitty]

Seeing an error when trying to use wallet connect in our dapp when deployed on IPFS.

Relevant code looks like this:

import { initializeConnector } from '@web3-react/core';
import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2';

...

const walletConnectConnector = initializeConnector<WalletConnectV2>(
  (actions) =>
    new WalletConnectV2({
      actions,
      options: {
        projectId: "SECRET_PROJECT_ID",
        chains: requiredChains,
        optionalChains,
        showQrModal: true,
      },
    })
);

...

When the user selects WalletConnect as as option we then call walletConnectConnect.activate(chainId) and see the following error message:

main.3c7db82c.js:163 Uncaught (in promise) TypeError: w.default.init is not a function
    at TA.createClient (main.3c7db82c.js:163:30561)
    at TA.initialize (main.3c7db82c.js:163:30415)
    at TA.init (main.3c7db82c.js:163:27620)
    at G.initialize (main.3c7db82c.js:163:53638)
    at G.init (main.3c7db82c.js:163:49575)
    at t.<anonymous> (main.3c7db82c.js:163:58139)
    at Generator.next (<anonymous>)

Strangely, this flow works great locally. We are able to see a QR code get displayed and our transactions seem to go through just fine. I'm trying to understand where exactly this issue is coming up, either in this library or in the WalletConnectV2 library.

[arein]

Have a test link?

[sophialittlejohn]

also looking for a solution to the same error. Using react and vite.

Found this in walletconnect: https://github.com/WalletConnect/walletconnect-monorepo/issues/2845

[ohitslaurence]

I believe this is a rollup issue, solved it by aliasing to the umd files. This is how I did it with vite:

export default defineConfig(({ command, mode }) => {
    return {
        ...
        resolve: {
            alias: {
                '@walletconnect/ethereum-provider':
                    '../../../@walletconnect/ethereum-provider/dist/index.es.js',
                '@walletconnect/utils': '../../../@walletconnect/utils/dist/index.umd.js',
            },
        }
    }
})

[sophialittlejohn]

Thank you @ohitslaurence, that solved the problem for me!

[chris13524]

I believe the problem lies here:

https://github.com/Uniswap/web3-react/blob/fc84e8b64b094b758f0c29a33977a47a349065bb/packages/walletconnect-v2/src/index.ts#L97-L98

It should be ethProviderModule.EthereumProvider.init(.

Similar issue with the type import at the top: https://github.com/Uniswap/web3-react/blob/fc84e8b64b094b758f0c29a33977a47a349065bb/packages/walletconnect-v2/src/index.ts#L1

That should be:

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

[torreyatcitty]

Confirmed the alias workaround also worked for us, thanks @ohitslaurence

resolve: {
    alias: {
      '@walletconnect/ethereum-provider': resolve(
        __dirname,
        'node_modules/@walletconnect/ethereum-provider/dist/index.umd.js'
      ),
    },
  },

Will be on the lookout for a proper fix so we can remove this workaround.

[jakubsgit]

torreyatcitty Even though this workaround works but when you want to have implemented v1 and v2 in your project it crashes v1

[torreyatcitty]

torreyatcitty Even though this workaround works but when you want to have implemented v1 and v2 in your project it crashes v1

I believe that the bridge servers for v1 have been turned off meaning that v1 no longer works anymore based on my understanding. We have removed v1 support completely. @jakubsgit

[shoom3301]

@jakubsgit good point. I was able to make wc1 + wc2 work together using vite aliases and patch-package:

1. Aliases (I use monorepo, it's a reason why the path is resolved on 2 levels top)

alias: {
        /**
         * Temporary fix for walletconnect
         * https://github.com/Uniswap/web3-react/issues/861
         */
        '@walletconnect/ethereum-provider': path.resolve(
          __dirname,
          '../../node_modules/@walletconnect/ethereum-provider/dist/umd/index.min.js'
        ),
        '@walletconnect/universal-provider': path.resolve(
          __dirname,
          '../../node_modules/@walletconnect/universal-provider/dist/index.cjs.js'
        ),
      },

2. Patches

a) node_modules/@web3-react/walletconnect-v2/dist/index.js

-        return (this.eagerConnection = Promise.resolve().then(() => __importStar(require('@walletconnect/ethereum-provider'))).then((ethProviderModule)...
+        return (this.eagerConnection = Promise.resolve().then(() => __importStar(require('../node_modules/@walletconnect/ethereum-provider/dist/index.cjs'))).then((ethProviderModule)...

b) node_modules/@walletconnect/universal-provider/dist/index.cjs.js

-        await Og.default.init({logger:this.providerOpts.logger||...
+        await (Og.default.init || Og.default.default.init)({logger:this.providerOpts.logger||...

@walletconnect+universal-provider+2.9.2.patch @web3-react+walletconnect-v2+8.3.7.patch

[aqibmaroof]

how to solve this error in react

import { initializeConnector } from "@web3-react/core"; import { WalletConnect as WalletConnectV2 } from "@web3-react/walletconnect-v2"; import { dataSwitchChainMainnet, dataSwitchChainTestnet, } from "../Configs/config";

const CHAINS = process.env.NEXT_PUBLIC_NETWORK_TYPE === "testnet" ? dataSwitchChainTestnet : dataSwitchChainMainnet;

const [mainnet, ...optionalChains] = CHAINS.map((chain) => Number(chain.chainID) );

const rpcObjs = {}; for (let i = 0; i < CHAINS.length; i++) { rpcObjs[Number(CHAINS[i].chainID)] = CHAINS[i].rpc; } console.log(mainnet, optionalChains); export const [walletConnectV2, hooks] = initializeConnector( (actions) => new WalletConnectV2({ actions, options: { projectId: "c421f7dd6d59e194fe7bd778c7276063", chains: [mainnet], optionalChains, showQrModal: true, rpcMap: { ...rpcObjs, }, }, }) );

[aqibmaroof]

TypeError: ethProviderModule.default.init is not a function