使用纸张输入时，Polymer 3.0未捕获的DOM异常 [英] Polymer 3.0 Uncaught DOM Exception When using Paper-Input

问题描述

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

When Using paper-input, the import throws the following exception

未捕获的DOMException:无法在'CustomElementRegistry'上执行'define':此名称已与该注册表一起使用.

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry.

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

I haven't done anything besides creating the template for 3.0 and adding the import.

Google用来更新其旧组件的迁移工具似乎存在问题.

There seems to be an issue with the Migration Tool, Google used to update their old components.

有人已经对它进行了排序吗?

Has anybody sorted this already?

推荐答案

更新此问题是由node_modules中的iron-meta的两个不同版本引起的:./node_modules/@polymer/iron-meta中的较旧版本位于3.0.0-pre.18(已与Polymer Starter Kit一起安装)，以及一个较新的版本(3.0.0-pre.19)作为新安装的@polymer/paper-input的依赖项.

UPDATE The issue is caused by two different versions of iron-meta in node_modules: an older version in ./node_modules/@polymer/iron-meta at 3.0.0-pre.18 (which is already installed with Polymer Starter Kit), and a newer one (3.0.0-pre.19) as a dependency of the newly installed @polymer/paper-input.

该修复程序最近记录在聚合物中博客-即删除package-lock.json并重新安装node_modules:

The fix was recently documented in the Polymer Blog -- i.e., delete package-lock.json and reinstall node_modules:

rm -rf node_modules package-lock.json
npm install

---

错误的堆栈跟踪信息(如下)似乎表明铁元元正以某种方式被注册两次:

---

The error's stack trace (below) seems to indicate iron-meta is being registered twice somehow:

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仅在尚未定义该元素的情况下运行:

One workaround is to patch customElements.define to only run if the element isn't already defined:

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

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

Run this before importing any element definition. I confirmed this works for the latest release of paper-input on macOS High Sierra, Chrome 66.

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

这篇关于使用纸张输入时，Polymer 3.0未捕获的DOM异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！