when components are loaded from CDNs like esm.run or esm.sh, they end up being bundled such that using multiple components can cause duplicate custom element registration errors.
CDN bundlers currently have no knowledge of all the entrypoints to the package to be able to deduplicate internal self imports. Using bare specifiers and package exports would help with this.
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "md-focus-ring" has already been used with this registry
Workaround
Workaround is to use the all.js entrypoint to register everything at once, or don't use a CDN and use a build system to actually bundle the code being used yourself.
What is affected?
Tooling
Description
As reported by a user on discord https://discord.com/channels/1012791295170859069/1076197552904491108/1165169545816846346
when components are loaded from CDNs like esm.run or esm.sh, they end up being bundled such that using multiple components can cause duplicate custom element registration errors.
CDN bundlers currently have no knowledge of all the entrypoints to the package to be able to deduplicate internal self imports. Using bare specifiers and package exports would help with this.
Reproduction
https://lit.dev/playground/#gist=73234f9745308e38a224d3eb92ca71ab
doing
produces error
Workaround
Workaround is to use the
all.js
entrypoint to register everything at once, or don't use a CDN and use a build system to actually bundle the code being used yourself.Using bare specifier imports internally would allow better deduplication control by these bundlers. e.g. https://github.com/material-components/material-web/blob/33e4293eca4f7056ed106f7247f12424dbc82290/button/internal/button.ts#L7-L8
could turn into
Unfortunately, I think package exports is required for self reference in Node https://nodejs.org/api/packages.html#self-referencing-a-package-using-its-name. So following should be added to
package.json
This can be considered breaking unless absolutely every file that was accessible before, including internal files, is listed there.
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
1.0.1
Browser/OS/Node environment
n/a