<paper-button> (etc) fails on polymer-3-starter-kit apps about paper-button HOT 12 CLOSED

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.

from paper-button.

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

from paper-button.

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.

from paper-button.

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).

from paper-button.

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).

from paper-button.

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

from paper-button.

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

from paper-button.

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

from paper-button.

I have the same problem

from paper-button.

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?

from paper-button.

This worked for me, thank you guys

from paper-button.

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

from paper-button.