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?

Mychal

How are you bundling your JS? I had this problem using "flat" imports with Webpack. Basically you have multiple declaration of the same custom element within your bundle. – Psychodrama

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}

Stope

Thanks for correcting my code! I've never used customElements.get, and the documentation... Well, we know the documentation. I rolled back to Polymer 2.0 as I was in a hurry, but will try this again when things calm down. Thanks a lot! – Mychal

I ran into this while going through polymer-project.org/3.0/start/toolbox/add-elements. The reinstallation did not help, but you customElements.define fix did, thanks! – Grogan

@Grogan glad that worked for you. Regarding the reinstall, did you delete both node_modules and package-lock.json beforehand? – Stope

@Stope yes, so did I – Grogan

Neither of those solutions works for me. With and without the patch, I get the same errors. Shown here... jpst.it/1kyao – Gleda

@Mowzer The error in your screenshot is not the same as the error in question. It seems like you might be missing some dependencies. – Stope

Thank you for this patch. Just like others said, deleting node_modules and package-lock didn't work for me, but your patch solved it. Hope there is a better fix in future, my base.html is sooooo ugly with all of the different helpers and polyfills needed, just so my app can run over multiple browsers >.< – Bordie

@Stope unfortunately I cannot do this as this is a private repo for a client :( – Bordie

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.

Helm

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.

Termination

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.

Dementia