Getting Uncaught DOMException ERROR : CustomElementRegistry.define: 'md-focus-ring' has already been defined as a custom element

[FatmaKahloun]

I'm creating my own library using Material design and Lit, but when I add this import statement import '@material/web/checkbox/checkbox.js' inside my new web component file I get this error (Uncaught DOMException : CustomElementRegistry.define: 'md-focus-ring' has already been defined as a custom element).

Can anyone helps me to resolve this issue and thanks.

[asyncliz]

This happens when two versions of MWC are loaded at the same time on a page.

Are you embedding a project inside an app that is already using MWC? If so, that's a tricky problem that requires coordination with the app it's being embedded into.

If not, I would check your build system or .js bundles. More than likely something isn't de-duplicating different MWC imports.

[asyncliz]

Extra info on your build system (or buildless/CDN) would help :)

[FatmaKahloun]

In fact, I create web components (my-own-components, each component is in different TS file) based on Material web component and Lit. So for each one of my-own-components I did import MWC that I will use to create my-own-component and it’s working fine when I create my-own-button and my-own-textField.
But I get this error while trying to create my-own-chechbox and call it inside my index.html file like I did with the others components.
And I’m using parcel to bundle the app.
Also I found out that the .js compiled files of my-own-button and my-own-chekbox both contain the definition of customElement(md-focus-ring).

[asyncliz]

You will need to bundle <my-own-button> and <my-own-checkbox> within the same JS file to de-duplicate the MWC import.

Alternatively, you can continue to bundle your elements separately but don't import MWC in them. Instead, bundle a third separate mwc-imports.js script with all your MWC imports and load that alongside your element scripts.

In the npm world, we'd call this a peer dependency.

[FatmaKahloun]

Thank you so much it works 😄