[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/[email protected] as a workaround.

It looks like the root cause is that 1) @web3modal/[email protected] has @web3modal/[email protected] as its transitive dependency (through @web3modal/[email protected]). and 2) @web3modal/[email protected] has @web3modal/[email protected]

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/[email protected], 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'

[email protected] /tmp/web3modal
├─┬ @web3modal/[email protected]
│ └─┬ @wagmi/[email protected]
│   └─┬ @wagmi/[email protected]
│     └─┬ @walletconnect/[email protected]
│       └─┬ @web3modal/[email protected]
│         └── @web3modal/[email protected]
└─┬ @web3modal/[email protected]
  └── @web3modal/[email protected]

The point is @walletconnect/[email protected] it requires "@web3modal/standalone": "2.1.1" without ^ (link to the line), which means requiring the exact version.

On the other hand, @web3modal/[email protected] requires @web3modal/[email protected] 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/[email protected] requires web3modal/standalone@^2.1.3 with the ^.

$ npm ls '@web3modal/ui'

[email protected] /tmp/web3modal
├─┬ @wagmi/[email protected]
│ └─┬ @wagmi/[email protected]
│   └─┬ @web3modal/[email protected]
│     └── @web3modal/[email protected] deduped
└─┬ @web3modal/[email protected]
  └── @web3modal/[email protected]

[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'
[email protected] /tmp/wallet-connect-test-web3modal
├─┬ @wagmi/[email protected]
│ └─┬ @wagmi/[email protected]
│   └─┬ @web3modal/[email protected]
│     └── @web3modal/[email protected] deduped
└─┬ @web3modal/[email protected]
  └── @web3modal/[email protected]

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

npm ls '@web3modal/ui'
[email protected] /tmp/wallet-connect-test-web3modal
├─┬ @wagmi/[email protected]
│ └─┬ @wagmi/[email protected]
│   └─┬ @web3modal/[email protected]
│     └── @web3modal/[email protected]
└─┬ @web3modal/[email protected]
  └── @web3modal/[email protected]

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"
  }