Using walletConnect to connect another blockchain(rainbowKit) while enabling walletConnect in use-Wallet cause error of Failed to execute 'define' on 'CustomElementRegistry': the name "wcm-button" has already been used with this registry

[jingxuan98]

Describe the bug
I am using walletConnect to connect another blockchain via (rainbowKit with wallet-connect option) while enabling walletConnect in use-Wallet for algorand (https://github.com/TxnLab/use-wallet) as well

SDK Version (if relevant)
"@walletconnect/modal-sign-html": "2.5.9", // tried 2.6.0 but still same using 2.5.9 because wagmi using 2.5.9 for modal
"wagmi": "^1.3.9",
"@rainbow-me/rainbowkit": "^1.0.7",

To Reproduce
Steps to reproduce the behavior:

1. Setup rainbowkit
2. Setup another wallet library using wallet-connect, eg. use-Wallet for algorand
3. start the dev web

Expected behavior
Should be able to wallet-connect on both chains successfully

Screenshots

Additional context
Add any other context about the problem here.

[glitch-txs]

Hi, make sure you set up the SDK configuration outside the react comoponents. I think they have already an example on their repo :)

[Charl00]

Hi @glitch-txs

I think it might be helpful to add the "their" and "the SDK" context please. 🙏

I have the same issue and moved my configuration of walletConnect outside the component into a context and the issue persists. I looked at the 1 other link referencing the same issue and I don't think I have duplicate components. I noticed you closed that one too.

I have separate components but one, being rainbowkit wallet modal, and the other being another blockchain's wallet modal.

In both components I need to use WalletConnect. This same error we see above appears right after clicking the WC option, configured for the second selector component only.