Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry

Question

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at http://127.0.0.1:8000/components/@polymer/polymer/lib/elements/dom-module.js:175:16

Tried deleting node-modules and package-lock and reinstalling did not work.

Answer 1

For those cases where it's a custom element you're registering simply check that an element by this name hasn't already been registered. Obviously you can include more complex logic to vary the name, decorate the class, etc, however this simply checks to see if something is already registered using the existing API and if not, registers the given thing (in my style--yours can vary, this is simply showing how to generally avoid the error):

customElements.get('the-element') || customElements.define('the-element', HTMLTheElement);

For more on the API see https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry

Answer 2

Well, this worked for me, with no Typescript warnings,

if (!customElements.get('the-element')) { customElements.define('the-element', HTMLTheElement); }

Hope someone will find this useful.

Cheers.