"EthereumProvider.init is not a function"

[w-toguchi83]

The application is using WalletConnect v1. We are currently working on upgrading it to v2.

We thought it would be a relatively straightforward task, but we encountered an error that is preventing us from proceeding. If anyone knows how to resolve this error, please let us know.

Uncaught (in promise) TypeError: EthereumProvider.init is not a function at WalletConnectConnector.initProvider_fn

We have updated the libraries involved in the process.

(package.json)

"@wagmi/core": "^1.2.0",
"@web3modal/ethereum": "^2.4.7",
"@web3modal/html": "^2.4.7",
"viem": "^1.0.7",

Here is the code for instantiating web3modal:

function configureChains(projectId, chains = CHAINS) {
  return _configureChains(chains, [w3mProvider({ projectId })])
}

function createWagmiClient(projectId, chains = CHAINS) {
  const { publicClient } = configureChains(projectId, chains)
  const wagmiClient = createConfig({
    autoConnect: false,
    connectors: w3mConnectors({ projectId, chains, version: 2 }),
    publicClient,
  })
  return wagmiClient
}

function createEthereumClient(projectId, chains = CHAINS) {
  const wagmiClient = createWagmiClient(projectId, chains)
  const ethereumClient = new EthereumClient(wagmiClient, chains)
  return ethereumClient
}

export function createWeb3Modal(projectId, chains = CHAINS) {
  const ethereumClient = createEthereumClient(projectId, chains)
  let recommendedWalletIds = PC_RECOMMENDED_WALLET_IDS
  if (isSP()) {
    recommendedWalletIds = SP_RECOMMENDED_WALLET_IDS
  }
  const web3modal = new Web3Modal(
    {
      projectId,
      explorerRecommendedWalletIds: recommendedWalletIds,
      enableNetworkView: chains.length > 1,
    },
    ethereumClient,
  )
  return web3modal
}

When I modify the code and set version: 1 , it works properly. Therefore, I suspect that the error is occurring in the code related to version: 2 , specifically in the handling of the WalletConnectConnector .

We appreciate any advice or guidance you can provide.

[siosio34]

This error is also happening to me.

[w-toguchi83]

To whom it may concern,

I have conducted an investigation, and as a conclusion, I believe this is likely a bug on the library side.

Please take a look at the following code:

https://github.com/wagmi-dev/references/blob/66f01245c68607c4ab1a6c25ccef23c7dff457ec/packages/connectors/src/walletConnect.ts#L279-L304

    const {
      default: EthereumProvider,
      OPTIONAL_EVENTS,
      OPTIONAL_METHODS,
    } = await import('@walletconnect/ethereum-provider')

The expectation is that default: EthereumProvider should be set to the Provider, but in reality, it is not set as expected.

As a result, an exception EthereumProvider.init is not a function is thrown.

When the code is changed as follows, it functions as expected:

    const {
      EthereumProvider,
      OPTIONAL_EVENTS,
      OPTIONAL_METHODS,
    } = await import('@walletconnect/ethereum-provider')

Instead of default: EthereumProvider, you can specify EthereumProvider.
https://github.com/WalletConnect/walletconnect-monorepo/blob/v2.0/providers/ethereum-provider/src/index.ts

I believe this is a bug. Will this bug be fixed soon?

Or should I contact wagmi about it?

[glitch-txs]

In the file your showing it's being exported both as default and name export

[w-toguchi83]

@glitch-txs
Thank you for your reply.

However, I'm sorry, but I didn't understand what you were trying to say.

Are you suggesting that it's bad code to have both default and named exports? In other words, do you think there might be an issue with the code on the library side that is doing the exporting?

In JavaScript, it is not prohibited to have both default and named exports in code. However, in the case of this code, I also think it doesn't serve much purpose.

[glitch-txs]

I think it might be an issue on the config of the bundle side instead of the library 🤔 it's hard knowing without a reproducible example as well:)

[w-toguchi83]

I have solved this issue!

Conclusion: Behavior changes depending on the version of esbuild.

In my project, I use esbuild for JavaScript bundling in Rails. Upon checking, I found that the version of esbuild I was using was 0.14.36.

When I changed it to the current latest version, which is 0.18.10, and tried again, the TypeError: EthereumProvider.init is not a function error no longer occurred.

Here are the results I obtained after checking with each version of esbuild:

0.14.36 -> Not working
0.15.18 -> Not working

0.16.0 -> Working
0.17.19 -> Working
0.18.10 -> Working

Such errors may also occur with other JS build tools. If you are facing the same problem, please try updating the version of your JS build tool to the latest one.

Thanks @glitch-txs , @siosio34