6

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?

Let Me Tink About It
  • 15,156
  • 21
  • 98
  • 207
Ignacio Nacho Parravicini
  • 113
  • 1
  • 5
  • 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. – LasaleFamine Jun 14 '18 at 08:33

4 Answers4

14

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

tony19
  • 125,647
  • 18
  • 229
  • 307
  • 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! – Ignacio Nacho Parravicini May 18 '18 at 16:17
  • I ran into this while going through https://www.polymer-project.org/3.0/start/toolbox/add-elements. The reinstallation did not help, but you `customElements.define` fix did, thanks! – dArignac Jul 03 '18 at 18:47
  • @dArignac glad that worked for you. Regarding the reinstall, did you delete both node_modules and package-lock.json beforehand? – tony19 Jul 03 '18 at 18:56
  • @tony19 yes, so did I – dArignac Jul 05 '18 at 18:03
  • Neither of those solutions works for me. With and without the patch, I get the same errors. Shown here... https://jpst.it/1kyao – Let Me Tink About It Jul 31 '18 at 09:09
  • @Mowzer The error in your [screenshot](http://jpst.it/1kyao) is not the same as the error in question. It seems like you might be missing some dependencies. – tony19 Aug 01 '18 at 06:48
  • 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 >. – Andre Oct 16 '18 at 23:01
  • @tony19 unfortunately I cannot do this as this is a private repo for a client :( – Andre Oct 17 '18 at 00:19
1

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.

Vikram Rawat
  • 1,472
  • 11
  • 16
0

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.

Let Me Tink About It
  • 15,156
  • 21
  • 98
  • 207
布日古德
  • 1
  • 1
  • 1
0

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.

Matt
  • 509
  • 2
  • 14