PolymerElements / paper-button

A button à la Material Design
https://www.webcomponents.org/element/PolymerElements/paper-button
138 stars 64 forks source link

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

Closed decani closed 6 years ago

decani commented 6 years ago

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

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

creativeautomaton commented 6 years ago

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

keanulee commented 6 years ago

I added some comments about package-lock.json at https://github.com/Polymer/polymer-starter-kit/issues/1123#issuecomment-402248889. Closing since no action is needed in this repository.

kirilledelman commented 5 years ago

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 commented 5 years ago

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

gilbertoRosalesVaquin commented 5 years ago

I have the same problem

sushantbs commented 5 years ago

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 commented 5 years ago

This worked for me, thank you guys

flatmax commented 5 years ago

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