Polymer 未捕获的DomeException:未能执行'；定义'；在'；CustomElementRegistry'；：此名称已用于此注册表

未捕获的DomeException:未能对“CustomElementRegistry”执行“define”：此名称已用于此注册表 在

---

尝试删除节点模块和包锁并重新安装失败。

对于正在注册的自定义元素，只需检查是否尚未注册使用此名称的元素。显然，您可以包含更复杂的逻辑来更改名称、修饰类等，但是这只是检查是否已经使用现有API注册了某些内容，如果没有，则注册给定的内容（在我的样式中--您的样式可能有所不同，这只是说明如何通常避免错误）：

有关API的更多信息，请参见《为我工作，没有打字脚本警告》

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

希望有人会觉得这个有用

---

干杯。

使用上述答案是不明智的。你希望它失败！原因是您的NPM应该删除重复的包，因此，您多次看到某个组件在custom elements注册表中定义，这是一个关键错误，您需要调试为什么同一组件被多次注册

如何调试，简而言之，转到浏览器，检查元素，网络选项卡，刷新，找出哪些文件都注册了相同的元素。然后签入启动器以查看哪些文件正在加载这些文件。然后，您可以更好地了解为什么您的应用程序没有将同一导入解析到单个位置（您的重复数据消除依赖项）

---

您可能面临此问题的一个原因是semver。如果同一依赖项有多个不同的主要版本，NPM不能将所有安装重复到根节点_模块。如何解决这个问题取决于你自己。有些人将npm别名用于其不同的依赖项，有些人在其构建工具中实现插件以解析单个安装的路径，等等。

对于无法使用@jimmonts-answer的人，因为问题在于他们的依赖项之一，您可以使用以下代码片段：

这种情况发生在我们身上，因为我们使用的包定义了一个元素。但是这个软件包被多个应用程序使用。而这些应用程序，你不知道吗，是互动的。因此

customElements.define（'x-tag'，className）

被多次调用。第二次出现时，应用程序崩溃

函数安全装饰器（fn）{
//eslint禁用下一行函数名
返回函数（…args）{
试一试{
返回fn.apply（此参数为args）；
}捕获（错误）{
如果(
DOMEException的错误实例&&
error.message.includes（'已与此注册表一起使用'）
) {
返回false；
}
投掷误差；
}
};
}
customElements.define=safeDecorator（customElements.define）；

如果我没记错的话，当我使用（至少）两条不同的路径多次包含同一元素时（即使相对路径解析为相同的绝对路径），我也会遇到类似的错误。因此，您可以在导入元素时仔细检查是否使用相同的约定。在导入文件时遇到了一些问题。错误现在已解决。谢谢你，因为这是我见过的最好的方法。如果需要，为什么像Polymer这样的库没有它们？我试图避免为每个组件编写额外的代码。我认为在v3上，thx@JGleason Polymer是生命的终结。我不确定LitElement（afaik聚合物继承者）做了什么，但是用DIY解决方案抽象出来似乎是一个直截了当的问题——使用基类扩展所有内部组件，可能本身就是LitElement等现有组件的扩展。这将使长期维护变得更容易，因为我们在长期软件生命周期中迭代。我正在寻找更多的标准方法来处理这一点，只是规范web组件非常棒。Cheers说，虽然将组件作为脚本注入，效果很好，但我在开发和热重新加载时使用了上述方法，其中浏览器已经注册了元素，但customElement.define周围的代码已更改，您不理解在某些情况下可以重新调用导入。此外，你正在回答一个没有被问到的问题。注意如何避免这些双重导入的情况是很有帮助的，但这是对问题的评论，而不是答案。在使用HMR时，使用实际支持自定义元素重定义的HMR解决方案可能是有意义的。举个例子。如果您需要将它应用到您自己的HMR解决方案中，您可以使用更快速、更脏的解决方案来使用新的HtmleElement扩展类重新定义您的自定义元素。@jimmont我回答了原始问题，转到“网络”选项卡，找出为什么加载的多个模块执行相同的customElements.define。这个问题不能用代码很好地解决，它是结构化的。例如，您需要运行npm重复数据消除。或者，如果这不起作用，例如，您正在使用同一组件的多个主要版本，请在单个安装进入浏览器之前找到另一种解决方法，例如，使用bundler插件或dev server插件。此答案很有帮助。在我的例子中，它是library@d3fc/d3fc元素，在我的devtools中对该库的简单搜索显示它被加载了两次（从npm链接包的node_模块）

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