WalletConnectV2 Connector Build Issue

[cbonaco1]

First want to mention that my team and I ❤️ useDApp. nice work!

Describe the bug We ran into issues using the @usedapp/wallet-connect-v2-connector package while upgrading to WalletConnect v2. We included the connector as a dependency, but saw the below build error:

10:27:40.718 | Error [ERR_REQUIRE_ESM]: require() of ES Module /opt/buildhome/repo/node_modules/@web3modal/standalone/dist/index.es.js from /opt/buildhome/repo/node_modules/@usedapp/wallet-connect-v2-connector/dist/cjs/src/index.js not supported.
10:27:40.718 | Instead change the require of index.es.js in /opt/buildhome/repo/node_modules/@usedapp/wallet-connect-v2-connector/dist/cjs/src/index.js to a dynamic import() which is available in all CommonJS modules.
10:27:40.718 | at Object.<anonymous> (/opt/buildhome/repo/node_modules/@usedapp/wallet-connect-v2-connector/dist/cjs/src/index.js:45:20)

Looking into this, I did see @web3modal/standalone is a dependency of the walletConnectv2 connector, which according to npm is deprecated. should this possibly use @walletconnect/modal instead?

To Reproduce Here is our useDApp config:

const config: Config = {
  readOnlyChainId: currentChainId,
  readOnlyUrls: {
    [currentChainId]: `https://${
      currentChainId === Mainnet.chainId ? 'mainnet' : 'goerli'
    }.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID ?? ''}`,
  },
  refresh: 'never',
  connectors: {
    metamask: new MetamaskConnector(),
    walletConnect: new WalletConnectV2Connector({
      projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID || '',
      chains: currentChainId === Mainnet.chainId ? [Mainnet] : [Goerli],
    }),
  },
};

Then from our own modal, onClick of the WalletConnect button, we have just the following:

activateBrowserWallet({ type: 'walletConnect' });

Software versions

• @usedapp/[email protected]
• @usedapp/[email protected]
• Package manager npm
• Node version 16

Any guidance here is appreciated 🙏

[tamebadger]

seeing the same issue here, additionally using next.js & yarn, same version of usedapp/core

[DanielKlys7]

Any fixes? 🤔

[yivlad]

Have you tried including something like this in your bundler confg?

[yivlad]

@usedapp/[email protected] is now available on npm. Could you please try it out and let me know if this solves the problem? I replaced @web3modal/standalone with @walletconnect/modal as @cbonaco1 suggested.