Why does NPM install another node_modules folder within a polymer element and how can this be fixed?

Question

Question

I am following the "Build an App with App Toolbox" tutorial. I had an issue with step 3 "add some elements" where the view would not display once I try to add the paper-checkbox element.

After some trial and error, I discovered that there is an extra node_modules folder within the paper-checkbox folder. This caused the view to break and therefore not display (more on this below). Why does this happen and how can this be fixed?

Tutorial Link

https://www.polymer-project.org/3.0/start/toolbox/add-elements

Full Problem Details

I started the project using the command line interface, ran polymer init and chose polymer-3-starter-kit per the tutorial instructions. I ran the following command to install paper-checkbox:

npm install @polymer/paper-checkbox

Note that I get the following warning after I install the element:

npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.

+ @polymer/[email protected]
added 12 packages from 1 contributor and audited 13720 packages in 27.422s
found 46 vulnerabilities (25 low, 14 moderate, 5 high, 2 critical)
run npm audit fix to fix them, or npm audit for details

I checked my node_modules folder and I can see that paper-checkbox was installed.

So far when I load my-new-view it displays correctly, like this:

However, when I add the import statement inside my-new-view.js for the paper-checkbox element, import '@polymer/paper-checkbox/paper-checkbox.js'; the view fails to display:

After some code comparison with another project, I see that the paper-checkbox folder does not match up (see screenshot below). It contains a duplicate node_modules folder, which contains a duplicate @polymer folder. This polymer folder contains font-robota and other modules that are already contained in the top polymer directory; even more duplicated content.

Furthermore, on inspecting the webpage, the console (on chrome) gives the following error:

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/paper-checkbox/node_modules/@polymer/iron-meta/iron-meta.js:141:1

This error occurs due to the fact that there is duplicate content. To solve this, I simply deleted the node_modules folder within the checkbox element.

I also tried installing paper-input as well. paper-input requires iron-input. After running npm install @polymer/paper-input the same node_modules folder is installed within both the iron and paper input elements. I deleted these two folders and then the element finally works.

Why does npm do this? And how can I fix it?

Github Project Repo

https://github.com/starkindustries/my-first-polymer-app

Version Info

• Git Version 2.17.1 (Apple Git-112)
• NPM version 6.4.1
• Node version v10.10.0
• Polymer CLI version 1.8.0
• Chrome Version 69.0.3497.100 (Official Build) (64-bit)

Answer 1

Did you run npm install @polymer/paper-checkbox from the project root? If you run npm install command from the root of papaer-checkbox folder, it would read it's dependency folder from it's package.json file and install them.