web3modal: [bug] The name "w3m-account-button" has already been used with this registry

Link to minimal reproducible example

See https://github.com/WalletConnect/web3modal/issues/1371#issuecomment-1746525872

Summary

Error: Failed to execute 'define' on 'CustomElementRegistry': the name "w3m-account-button" has already been used with this registry

It appears that the @customElement('w3m-account-button') code is being called twice via createWeb3Modal. I’m migrating from NextJS page router to app router and it appears that there may be some nesting going on where both are active at the same time which is causing createWeb3Modal to be run twice.

Can that custom element definition be gated by a check that it doesn’t exist?

Thank you.

List of related npm package versions

“@web3modal/wagmi”: “^3.0.2”

About this issue

Original URL
State: closed
Created 9 months ago
Comments: 30 (13 by maintainers)

Most upvoted comments

Alright, I believe this is now solved (part of next release, if you want to test canary use 3.1.0-598ec14). Had to re-create lit’s createElement decorator and add a check for existing custom components. Tested with @bartomolina example on that canary, no errors 👍

xzilja on Oct 10, 2023

Looking into this today/tomorrow 👍 ideally we find solution on our end that doesn’t require any workarounds for users. Ty for extra context as well everyone 🤝

xzilja on Oct 9, 2023

Hi, creator of Nexth here. I experienced the same error yesterday, but haven’t been able to reproduce properly. It does indeed seem like an intermittent issue during refresh/hot reload. I have not seen this on production yet. But will continue to monitor…

Also providing some context on client/server architecture. Since most providers, contexts, auth, etc. will require client-side rendering you’ll likely end up using some higher level client component either way. My understanding though is that you can still render server components within client components as long as you inject them as children and not import. I think this is a fair solution and definitely not a hacky work-around

See https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props Or https://app-router.vercel.app/context

wslyvh on Oct 7, 2023