polymer - 使用 Paper-Input 时 Polymer 3.0 未捕获的 DOM 异常

Question

使用paper-input时，导入会引发以下异常

未捕获的 DOMException：无法在“CustomElementRegistry”上执行“定义”：此名称已用于此注册表。

除了为 3.0 创建模板并添加导入之外，我什么也没做。

迁移工具似乎有问题，谷歌曾经更新他们的旧组件。

有人已经排序了吗？

Answer 1

更新这个问题是由两个不同版本的iron-metain引起的node_modules：一个旧版本 in ./node_modules/@polymer/iron-metaat 3.0.0-pre.18（已经安装了 Polymer Starter Kit），一个新版本 ( 3.0.0-pre.19) 作为新安装的依赖项@polymer/paper-input。

该修复程序最近记录在Polymer 博客中——即删除package-lock.json并重新安装node_modules：

rm -rf node_modules package-lock.json
npm install

---

错误的堆栈跟踪（如下）似乎表明 iron-meta 以某种方式被注册了两次：

polymer-fn.js:43 Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at Polymer (http://127.0.0.1:8081/node_modules/@polymer/polymer/lib/legacy/polymer-fn.js:43:18)
    at http://127.0.0.1:8081/node_modules/@polymer/iron-input/node_modules/@polymer/iron-meta/iron-meta.js:131:1

一种解决方法是修补customElements.define以仅在尚未定义元素时运行：

const _customElementsDefine = window.customElements.define;
window.customElements.define = function(name, clazz, config) {
  if (!customElements.get(name)) {
    _customElementsDefine.call(window.customElements, name, clazz, config);
  }
};

在导入任何元素定义之前运行它。我确认这适用paper-input于 macOS High Sierra、Chrome 66 上的最新版本。

---

^{链接您创建的问题以供参考：PolymerElements/paper-input问题 #652}

Answer 2

Polymer 网站上有解决方案 https://www.polymer-project.org/blog/2018-05-25-polymer-elements-3-faq

1. 基本上删除 node_modules 和 package-lock.json
2. 然后重新安装，即npm install

它应该工作。

Answer 3

我们有解决这些类型问题的方法。事实证明，聚合物 3 不喜欢嵌套在 node_modules 中。诀窍是手动删除抱怨的模块的嵌套。

github上针对聚合物的这个问题突出了一个脚本化的解决方案。

Answer 4

按照教程添加聚合物元素，当我导入 paper-checkbox.js 时，我得到了同样的错误。我的解决方案只是编辑文件

paper-checkbox.js

改变线路

import '@polymer/polymer/polymer-legacy.js';

至

import '../../@polymer/polymer/polymer-legacy.js';

请记住始终从一个地方导入相同的模块。