[bug] CustomElementRegistry.define: 'w3m-box-button' has already been defined as a custom element

[s0xDk]

Link to minimal reproducible example

https://codesandbox.io/s/optimistic-estrela-uo5joj?file=/src/index.js

Summary

Uncaught (in promise) DOMException: CustomElementRegistry.define: 'w3m-box-button' has already been defined as a custom element [app.min.js:60] initUi client.ts:36 AsyncFunctionThrow self-hosted:814 (Async: async) VD client.ts:17 initialize client.ts:36 InterpretGeneratorResume self-hosted:1822 AsyncFunctionNext self-hosted:810 (Async: async) init client.ts:36 Ofe walletConnect.js:222 AsyncFunctionNext self-hosted:810 (Async: async) XD walletConnect.js:208 nN walletConnect.js:63 kfe utils.ts:41 Hnt app.js:57

app.js:29 ### List of related npm package versions "@wagmi/core": "^0.10.0", "@web3modal/ethereum": "^2.1.3", "@web3modal/html": "^2.1.3", "ethers": "^5.7"

[m-noks]

Same error for me. Failed to execute 'define' on 'CustomElementRegistry': the name "w3m-box-button" has already been used with this registry

Fresh nextjs installation nextjs example

[mecab]

I was having the same issue. I found installing (or downgrading to) @web3modal/react@2.1.1 as a workaround.

It looks like the root cause is that 1) @web3modal/ethereum@2.1.3 has @web3modal/ui@2.1.1 as its transitive dependency (through @web3modal/standalone@2.1.1). and 2) @web3modal/react@2.1.3 has @web3modal/ui@2.1.3

This can cause the project to have two versions of @web3modal/ui and potentially both versions are required separately. @web3modal/ui defines the components when they are required, so it ends up with the duplicated definition.

At a project level, I suggest separating @web3modal/ui as a peer dependency of either @web3modal/ethererum or @web3modal/react and letting the developer install a specific version of @web3modal/ui separately so they refer single version of @web3modal/ui.

I have just jumped in to this repository today so I might have some misunderstanding though 🙇‍♂️.

[xzilja]

Provided codesandbox example uses ethers v6, wagmi only works with v5. Also, if there are multiple versions of ui package, seems like something might've gone wrong during dependency update / downgrade. Could you try removing node_modules and your .lock file and do a fresh install

[s0xDk]

web3modal-test.zip

attached the minimal example with the following deps:

"@wagmi/core": "^0.10.0",
"@web3modal/ethereum": "^2.1.3",
"@web3modal/html": "^2.1.3",
"ethers": "^5.7"

To build the app.bundle.js, replace <YOUR_PROJECT_ID> with real project id in app.js then run:

npm i
./build.sh

produces the error:

[ktomascz]

Same issue. Downgrade to web3modal/react@2.1.1, as suggested by mecab, solves the issue.

[mecab]

@0xAsimetriq I have tried removing node_modules and package-lock.json; performing a new install. But it did not solve the problem.

I still think it's an issue that relates to the dependency tree structure.

You can see it by npm ls

$ npm ls  '@web3modal/ui'

web3modal@1.0.0 /tmp/web3modal
├─┬ @web3modal/ethereum@2.1.3
│ └─┬ @wagmi/core@0.10.1
│   └─┬ @wagmi/connectors@0.3.2
│     └─┬ @walletconnect/ethereum-provider@2.4.7
│       └─┬ @web3modal/standalone@2.1.1
│         └── @web3modal/ui@2.1.1
└─┬ @web3modal/react@2.1.3
  └── @web3modal/ui@2.1.3

The point is @walletconnect/ethereum-provider@2.4.7 it requires "@web3modal/standalone": "2.1.1" without ^ (link to the line), which means requiring the exact version.

On the other hand, @web3modal/react@2.1.3 requires @web3modal/ui@2.1.3 that is also specified without ^ so npm ends up with installing both of the versions.

Obviously we use <Web3Modal> and <WagmiConfig> and they ultimately requires @web3modal/ui inside them.

import { Web3Modal } from "@web3modal/react";
import { WagmiConfig } from "wagmi";

But these ui versions are different so they tries to define a component with same name and ends up with the error.

(If you downgrade @web3modal/react to 2.1.1, npm dedupes them so @web3modal/react and wagmi requires exactly same code of @web3modal/ui and required only once so the problem solves.)

[xzilja]

@mecab can you try the same, but downgrade to @wagmi/core 0.9.7 (still do clean install with this version). Newer versions of wagmi are not supported just yet

[xzilja]

Also for anyone who wants to test against latest wagmi version, you can use this canary release 2.2.0-afa987d

[mecab]

@0xAsimetriq I don't have the minimum example code at the moment so I cannot test it very soon, but it seems to work fine theoretically since a transient dependency @wagmi/connectors@0.2.7 requires web3modal/standalone@^2.1.3 with the ^.

$ npm ls '@web3modal/ui'

web3modal@1.0.0 /tmp/web3modal
├─┬ @wagmi/core@0.9.7
│ └─┬ @wagmi/connectors@0.2.7
│   └─┬ @web3modal/standalone@2.1.3
│     └── @web3modal/ui@2.1.3 deduped
└─┬ @web3modal/react@2.1.3
  └── @web3modal/ui@2.1.3

[mecab]

I will validate it soon and also the canary version soon.

[mecab]

@0xAsimetriq

Confirming installing both @wagmi/core@^0.9 and wagmi@^0.11 works.

"dependencies": {
    "@types/node": "18.14.6",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "@wagmi/core": "^0.9.7",
    "@web3modal/ethereum": "^2.1.3",
    "@web3modal/react": "^2.1.3",
    "eslint": "8.35.0",
    "eslint-config-next": "13.2.3",
    "ethers": "^5.7.2",
    "next": "13.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.5",
    "wagmi": "^0.11.7"
  }

$ npm ls '@web3modal/ui'
wallet-connect-test-web3modal@0.1.0 /tmp/wallet-connect-test-web3modal
├─┬ @wagmi/core@0.9.7
│ └─┬ @wagmi/connectors@0.2.7
│   └─┬ @web3modal/standalone@2.1.3
│     └── @web3modal/ui@2.1.3 deduped
└─┬ @web3modal/react@2.1.3
  └── @web3modal/ui@2.1.3

I am happy to test the canary release, but @web3modal/react@2.2.0-afa987d requires exact canary release of @web3modal/ui@2.2.0-afa987d so it again ends up with 'w3m-box-button' has already been defined as a custom element.

npm ls '@web3modal/ui'
wallet-connect-test-web3modal@0.1.0 /tmp/wallet-connect-test-web3modal
├─┬ @wagmi/core@0.9.7
│ └─┬ @wagmi/connectors@0.2.7
│   └─┬ @web3modal/standalone@2.1.3
│     └── @web3modal/ui@2.1.3
└─┬ @web3modal/react@2.2.0-afa987d
  └── @web3modal/ui@2.2.0-afa987d

For the easiness of testing, I still suggest making any wants of @web3modal/ui as peerDependencies over dependencies. (I think making @web3modal/ui@^2, with ^, it will also work but I feel peerDependency is more suitable for this case.)

[xzilja]

@mecab You should only need to install wagmi 0.11.x (it will have core as dependency) 👍

[mecab]

@0xAsimetriq v2.2.0 works, thank you!! 👏

Here's my packages installed -- just for the people to see this in the future.

"dependencies": {
    "@types/node": "18.14.6",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "@web3modal/ethereum": "^2.2.0",
    "@web3modal/react": "^2.2.0",
    "eslint": "8.35.0",
    "eslint-config-next": "13.2.3",
    "ethers": "^5.7.2",
    "next": "13.2.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.5",
    "wagmi": "^0.12.1"
  }