[UI] question in nuxt 3

[mahdi4187]

Your Question

hey guys

i use this, works for first view page in nuxt 3 but after page change and back to page get this error

Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "tc-root" has already been used with this registry

please guide me

Context

onMounted(() => {
  nuxt.hook('page:loading:end', () =>  initializeWalletConnect())
})

function initializeWalletConnect() {
  tonConnectUIInstance = new TonConnectUI({
    manifestUrl: `${url}/tonconnect-manifest.json`,
    buttonRootId: 'ton-connect'
  });

  tonConnectUIInstance.uiOptions = {
    twaReturnUrl: `https://t.me/${botUserName}`,
    uiPreferences: {
      theme: THEME.DARK,
      colorsSet: {
        [THEME.DARK]: {
          connectButton: {
            background: '#0950db',
          }
        }
      }
    }
  };
}

What have you tried so far?

No response

Relevant Code or Commands

No response

Documentation Check

• Yes, I have checked the documentation.

[glutaminefree]

Same error but on Vue 3 + Vue Router and without Nuxt.

[xcaptain]

Same error here using sveltekit, do you have a solution yet?

[slavnycoder]

Destroy method is needed.

[mahdi4187]

I fixed this

<script setup lang="ts">
import {TonConnectUIProvider} from '@townsquarelabs/ui-vue'

const colorMode = useColorMode();
const profitIsRun = useState("profitIsRun", () => false);
const {baseUrl,botUserName} = useRuntimeConfig().public

const options = {
  manifestUrl: `${baseUrl}/tonconnect-manifest.json`,
  twaReturnUrl: `https://t.me/${botUserName}`,
};

onMounted(() => {
  colorMode.preference = colorMode.value = "dark";
  window.Telegram?.WebApp.expand()
})
</script>
<template>
  <TonConnectUIProvider :options="options">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </TonConnectUIProvider>
</template>

and to other page

<script setup lang="ts">
import { useTonConnectUI, TonConnectButton, useTonAddress } from '@townsquarelabs/ui-vue';

const tonConnectUI = useTonConnectUI();
const address = useTonAddress();

async function checkProofInYourBackend(wallet: any) {
    if (wallet) {
        console.log(wallet);
    }
}

onMounted(() => {
    checkProofInYourBackend(address.value)
})
</script>

<template>
    <TonConnectButton className="mt-3" />
</template>

[xcaptain]

@mahdi4187 I don't understand your solution

[xcaptain]

I have a solution found from: WICG/webcomponents#754

const defineCustomElement = CustomElementRegistry.prototype.define;
CustomElementRegistry.prototype.define = function define(name, constructor, options) {
    if (name == 'tc-root') {
        return;
    }
    return defineCustomElement.call(this, name, constructor, options);
};

[designervoid]

I have a solution found from: WICG/webcomponents#754

const defineCustomElement = CustomElementRegistry.prototype.define;
CustomElementRegistry.prototype.define = function define(name, constructor, options) {
if (name == 'tc-root') {
return;
}
return defineCustomElement.call(this, name, constructor, options);
};

That's an interesting one. It works in a Vanilla environment too.