Uncaught DOMException: CustomElementRegistry.define: 'custom-button' has already been defined as a custom element #4343

egor-progger · 2023-10-28T05:43:02Z

egor-progger
Oct 28, 2023

I try to create npm package with components which are based on lit, but in browser console see error: Uncaught DOMException: CustomElementRegistry.define: has already been defined as a custom element.

I created copmonent which is based on 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>`;
  }
}

I compiled npm package locally to lit_test.tgz
I created different project where I copied archive with npm package lit_test.tgz
In second project for testing I created
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>

Component is rendered but browser console is dislpaying:
Uncaught DOMException: CustomElementRegistry.define: 'custom-button' has already been defined as a custom element

If remove const button = new Button; from index.ts then component is not rendered and in browser console not display error

justinfagnani · 2023-10-30T17:17:53Z

justinfagnani
Oct 30, 2023
Maintainer

You're somehow getting two copies of the button definition in your page. Can you add a console log to the component definition module to check?

2 replies

egor-progger Dec 9, 2023
Author

@justinfagnani , you right. Thanks!
I commented <script> tag in my index.html:

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

and I don't have this error.
I have this webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.ts",
  devServer: {
    compress: true,
    port: 9001,
    // static: path.join(__dirname, "dist"),
    // static: {
    //   serveIndex: true,
    // },
    hot: true,
  },

  devtool: "inline-source-map",
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

I tryied to repeat this example https://lit.dev/playground/#sample=v3-docs/templates/composeimports from this section of Lit documentation https://lit.dev/docs/components/rendering/#composing-templates, but I develop library with Lit and try to include my library to empty project for testing how it works. May be you can advice tutorial with recommendations how create library which is based on Lit.

augustjk Dec 19, 2023
Maintainer

You're likely getting the error due to bundling your component, especially as you compose multiple components that then import each other. For publishing components in an npm package, our recommendation is to not bundle your component code. See https://lit.dev/docs/tools/publishing/#don't-bundle-minify-or-optimize-modules

If you are authoring in TypeScript, tsc should be sufficient to produce the files to include in the package.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught DOMException: CustomElementRegistry.define: 'custom-button' has already been defined as a custom element #4343

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

Select a reply

Uncaught DOMException: CustomElementRegistry.define: 'custom-button' has already been defined as a custom element #4343

egor-progger Oct 28, 2023

Replies: 1 comment · 2 replies

justinfagnani Oct 30, 2023 Maintainer

egor-progger Dec 9, 2023 Author

augustjk Dec 19, 2023 Maintainer

egor-progger
Oct 28, 2023

Replies: 1 comment 2 replies

justinfagnani
Oct 30, 2023
Maintainer

egor-progger Dec 9, 2023
Author

augustjk Dec 19, 2023
Maintainer