@Programep

Почему появляется ошибка Uncaught DOMException: CustomElementRegistry.define: has already been defined as a custom element?

Пробую создать свой npm пакет с компонентами на базе lit, появляется ошибка Uncaught DOMException: CustomElementRegistry.define: has already been defined as a custom element.
1. Создал свой компонент на базе lit:
import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

@customElement("custom-button")
export class Button extends LitElement {
  protected override render() {
    return html` <button class="button">test</button>`;
  }
}

2. скомпилировал npm пакет локально в lit_test.tgz
3. создал проект куда скопировал архив с npm пакетом
4. в проекта для тестирования компонентов создал
index.ts:
import { Button } from 'lit_test';

const button = new Button;

index.html:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Lit Example</title>
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <custom-button></custom-button>
  </body>
</html>

Компонент отображается но в js консоли браузера ошибка:
Uncaught DOMException: CustomElementRegistry.define: 'custom-button' has already been defined as a custom element
Если из index.ts убрать код const button = new Button;, то в консоли ошибок нет компонент не отрисовывается.
  • Вопрос задан
  • 30 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы