Question

未捕获的DOMException：无法在'CustomElementRegistry'上执行'define'：此名称已与该注册表一起使用在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

对于不能使用@jimmons 回答的人，因为问题在于他们的依赖项之一，您可以使用以下代码段：

这发生在我们身上，因为我们使用的包定义了一个元素。但是这个包被多个应用程序使用。而这些应用程序，难道你不知道吗，交互。所以 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);

Answer 3

好吧，this为我工作，没有打字稿警告，

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

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

干杯。

Answer 4

我遇到了同样的错误。你可能和我没有同样的问题，但我想我会把我的解决方案放在这里，以防将来有人遇到同样的问题。

我有两个模块，它们都导入了相同的自定义元素模块，一个是导入 Module.js，另一个是 module.js。现在浏览器将其视为两个单独的文件，因为 URL 可以区分大小写，除外我的服务器将其视为一个文件，因为它不区分大小写 (express.js) 或至少即使大小写不正确，它也能够解析正确文件的路径。因此浏览器看到两个“不同”的模块都定义了相同的自定义元素，但是当我搜索我的源代码时，只有一个文件定义了自定义元素。

Answer 5

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

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

您可能会遇到此问题的一个原因是由于semver。如果您具有相同依赖项的多个不同主要版本，则NPM不能仅将所有安装重复数据删除到根node_modules。如何解决这个问题取决于您。有些人将npm-aliases用于其依赖关系的不同专业，有些人在其构建工具中实现了插件来解析单个安装的路径，等等。

未捕获的DOMException：无法在'CustomElementRegistry'上执行'define'：此注册表已经使用了该名称

5 个答案: