未捕获的 DOMException：无法在“CustomElementRegistry”上执行“define”：此名称已与此注册表一起使用

Question

未捕获的 DOMException：无法在“CustomElementRegistry”上执行“定义”：此名称已在http://127.0.0.1:8000/components/@polymer/polymer/lib/elements/dom-module.js 上与此注册表一起使用:175:16

尝试删除节点模块和包锁并重新安装不起作用。

Answer 1

对于您注册的自定义元素的情况，只需检查该名称的元素是否尚未注册。显然，您可以包含更复杂的逻辑来改变名称、装饰类等，但是这只是检查是否已经使用现有 API 注册了某些东西，如果没有，则注册给定的东西（以我的风格 - 你的可以改变，这只是展示了通常如何避免错误）：

customElements.get('the-element') || customElements.define('the-element', HTMLTheElement);

有关 API 的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry

Answer 2

嗯，这对我有用，没有打字稿警告，

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

希望有人会发现这很有用。

干杯。

Answer 3

使用上面的答案是不明智的。你想让它失败！原因是您的 NPM 应该对重复的包进行重复数据删除，因此您看到某个组件在自定义元素注册表上多次定义的事实是一个关键错误，您需要调试为什么同一组件被多次注册。

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

您可能会遇到此问题的原因之一是 semver。如果同一个依赖项有多个不同的主要版本，NPM 无法将所有安装的重复数据删除到根节点模块。如何解决这个问题取决于你。有些人将 npm 别名用于不同专业的依赖项，有些人在其构建工具中实现插件来解析单个安装的路径等。

Answer 4

对于因问题出在其依赖项之一而无法使用 @jimmmonts 答案的人，您可以使用以下代码片段：

这种情况发生在我们身上，因为我们使用的包定义了一个元素。但这个包被多个应用程序使用。您难道不知道，这些应用程序会进行交互。所以customElements.define('x-tag', className)会被多次调用。第二次发生时，应用程序就会崩溃。

function safeDecorator(fn) {
  // eslint-disable-next-line func-names
  return function(...args) {
    try {
      return fn.apply(this, args);
    } catch (error) {
      if (
        error instanceof DOMException &&
        error.message.includes('has already been used with this registry')
      ) {
        return false;
      }
      throw error;
    }
  };
}

customElements.define = safeDecorator(customElements.define);