Polymer 3.0 Uncaught DOM Exception When using Paper-Input

Question

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

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

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

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

Has anybody sorted this already?

Answer 1

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.

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

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);
  }
};

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

---

^{Linking the issue you created for reference: PolymerElements/paper-input Issue #652}

Answer 2

The solution is there on the Polymer website https://www.polymer-project.org/blog/2018-05-25-polymer-elements-3-faq

1. Basically delete node_modules and package-lock.json
2. Then reinstall, i.e. npm install

It should work then.

Answer 3

as follow the tutorial add polymer element,when i import paper-checkbox.js, I got the same error. my solution is just edit file

paper-checkbox.js

alter the line

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

to

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

Remember always import same module from one place.

Answer 4

We have a work around for these types of problems. It turns out that polymer 3 doesn't like nesting in node_modules. The trick is to manually remove nestings of modules which are complaining.

This issue on github against polymer highlights a scripted solution.