<paper-button> (etc) fails on polymer-3-starter-kit apps

[decani]

Description

paper-button fails to import with Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry when

1. using polymer-3-starter-kit
2. adding paper-button to any other element (app element or otherwise

The view fails to render

Expected outcome

The button renders properly

Notes

1. It fails for paper-input (others?) as well
2. It fails if there is another paper element before the paper-input
3. It WORKS for simple polymer 3 apps

Actual outcome

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

Steps to reproduce

1. Create polymer-3-starter-kit app
2. Check it works
3. Add import '@polymer/paper-button/paper-button.js';
4. Refresh browser - it fails with message in console

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Other Info

I have 3.0.0-pre.19 installed

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

[keanulee]

This is a symptom of duplicate dependencies installed. Do you see multiple requests of polymer-legacy.js or paper-button.js (from different nested node_modules/) in the network timeline? Are there multiple versions of polymer in your package-lock.json?

This is definitely a footgun with using NPM and custom elements. We try to include working package-lock.json in our projects (polymer-starter-kit, pwa-starter-kit, etc.), but you definitely need to be careful with this when updating dependencies.

[colincannon-acp]

I am having the same problem with paper-input and paper-button, and those are the only elements I tested with the new starter kit. I gave up trying after that. My starter kit was bare bones, to replicate simply init the start kit 3.0 and import paper-button (or paper-input).

[keanulee]

If you're are adding new element dependencies (like paper-button) to polymer-starter-kit, be sure you don't end up installing multiple, nested copies of polymer. The best way to do this is to start with fresh set of dependences (rm -rf node_modules/ package-lock.json; npm i) and then reviewing network timeline and package-lock (as I mentioned in my last comment).

[herberthobregon]

@keanulee Thank you very much! I was already frustrating with this error!

[creativeautomaton]

A quick fix for this is just to delete the node_modules folder inside the @polymer/paper-button folder

[keanulee]

I added some comments about package-lock.json at Polymer/polymer-starter-kit#1123 (comment). Closing since no action is needed in this repository.

[kirilledelman]

This is really annoying, considering as a new user I followed the guide exactly (https://www.polymer-project.org/3.0/start/toolbox/add-elements) and end up with cryptic errors like these.

[keanulee]

@katejeffreys @arthurevans Can we update the docs site with this info?

[gilbertoRosalesVaquin]

I have the same problem

[sushantbs]

Is there a proposed solution for managing versions more elegantly? I understand that this is sort of an issue of using npm in conjunction with custom elements but I foresee this is as a significant deterrent, especially as the size of the application grows and updating packages in way that their dependencies are always in sync becomes difficult. Have you tried / would you recommend using webpack and use the resolve: { alias: {...} } option to avoid running into the aforementioned issue?

[jcanales]

This worked for me, thank you guys

[flatmax]

We have a method for resolving these issues, it is to do with removing nested @Polymer modules. Check it out here :
Polymer/polymer#5407