Failed to execute 'define' on 'CustomElementRegistry': the name blabla has already been used...

We have an npm package (for namings sake it is package C), which defines many custom element registries in this way: window.customElements.define('blabla', someClass); the problem is that this module is imported via multiple other npm packages (namely A and B). So let's say I have npm package A that includes npm package B and C, and I have npm package B which relies on C. C defines these custom elements (see above) but since B is using 1.O and A is using 2.O of this package, the following error pops up when I'm compiling my angular A project: Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "blabla" has already been used with this registry.

How does companies deal with this issue? I thought about versioning our package numbers, so that instead of the defining code above, I'd do something like this: window.customElements.define('blabla'+versionNumber(), someClass); What is the best way to handle this, is there a built in javascript thing for this? I've no idea how to look this up, tried googling it for a while now.

Continue reading...