Closed decani closed 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.
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).
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).
@keanulee Thank you very much! I was already frustrating with this error!
A quick fix for this is just to delete the node_modules folder inside the @polymer/paper-button folder
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.
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.
@katejeffreys @arthurevans Can we update the docs site with this info?
I have the same problem
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?
This worked for me, thank you guys
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
Description
paper-button fails to import with
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
whenpaper-button
to any other element (app element or otherwiseThe view fails to render
Expected outcome
The button renders properly
Notes
paper-input
(others?) as wellActual outcome
Console reports:
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
Steps to reproduce
import '@polymer/paper-button/paper-button.js';
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`