Registry conflicts

Element names are unique, so if you try to register two different implementations of the same element via window.customElements, you'll encounter an error like:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry':
the name "foo-bar" has already been used with this registry

You might hit this error when:

Resolution #

First, verify that each @spectrum-web-components package in your package.json shares the same version. If @spectrum-web-components/button is on version 0.30.0, then all other SWC packages should also be on version 0.30.0.

Further resolutions are package-manager dependent, but the goal state is the same: a de-duped dependency tree where multiple versions of the same package are hoisted into a single version.

Regardless of package manager, packages that share a dependency with un-resolvable semver ranges are not compatible with one another. The solution is typically for the package maintainers to bump their dependencies to a recent version.

If that isn't possible, package managers provide a way to force version resolutions. However, forcing incompatible versions is likely to cause undefined or breaking behavior in your application:

With npm or pnpm #

Run (p)npm dedupe to collapse multiple definitions of the same component into a single dependency in your tree.

To check for duplication, run npm list @spectrum-web-components/packagenamehere. This will show the branches of the dependency tree that include the conflicting package.

Also, consider setting npm config set prefer-dedupe true for npm to deduplicate packages by default. With this set, npm will dedupe by default, which is convenient for web component development.

With yarn #

Yarn removed its dedupe command, since in theory it dedupes on install. However, this does not seem to always be true.

If you are not able to switch to a package manager that can dedupe dependency trees automatically, then you may have to dedupe manually. With yarn, that involves:

Future #

The Scoped custom element registries proposal is being prototyped in Chrome and discussed in standards groups like the WCCG.

Scoped registries would allow for multiple custom element definitions for a single tag name to coexist within a page. While that will alleviate some pain, it will not be a panacea, because:

Experimentation with scoped registry polyfills showed unacceptable performance degradation for a large component library.

To support this feature in coming to browsers faster, share your use case with implementors to help increase awareness and priority of this API.