Polymer: Duplicate loading of custom element should not crash the app

[dakotaJang]

Description

Loading a custom element that depends on other custom elements that are already imported by other custom elements in the app will prevent the page from loading. While trying to define a custom element with same name should be avoided, if the defining custom element is same as the defined custom element (i.e. duplicate definition) instead of crashing the app (or subset of the app), it should warn the developer that the custom element is already loaded and let app to continue loading the rest of the app.

Steps to Reproduce

1. Start new polymer starter kit project

polymer init
? Which starter template would you like to use? polymer-3-starter-kit

1. Install @polymer/paper-button

npm i @polymer/paper-button

1. Import @polymer/paper-button/paper-button.js to use in the app.

import "@polymer/paper-button/paper-button.js";

Expected Results

Page should load properly.

Actual Results

Page does not load because an error gets thrown while trying to define new custom element.

This is because the starter project imports @polymer/paper-icon-button/paper-icon-button which defines <paper-ripple>. When I import @polymer/paper-button/paper-button.js this also tries to define <paper-ripple> which stops the page from loading.

Console Logs

Chrome

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-button/node_modules/@polymer/paper-ripple/paper-ripple.js:314:1

Firefox

Error: A custom element with name 'paper-ripple' has already been defined.

Safari

Unhandled Promise Rejection: NotSupportedError: Cannot define multiple custom elements with the same tag name

Browsers Affected

• [x] Chrome
• [x] Firefox
• [x] Edge
• [x] Safari 11
• [x] Safari 10
• [x] IE 11

Versions

• Polymer: v3.0.0
• webcomponents: v2.0.0

[TimvdLippe]

In general, these imports should be dedupliated. If they are not, please open an issue on https://github.com/polymer/tools/issues. Closing this issue per https://github.com/Polymer/polymer/pull/5280#issuecomment-401562305

[dakotaJang]

@TimvdLippe is right. This is not really a problem with polymer.

After a further investigation I found that it was the same script (with different versions) was being loaded multiple times which creates error mentioned above.

The problem with the example above is because when installing @polymer/paper-button, it installed the latest version which installs another node_modules in the paper-button folder in node_modules.

This is because the polymer-3-starter-kit has a older versions of the polymer elements being used (at the time written they are using 3.0.0-pre.15).

When I specified the version of the paper-button element to match the other elements, this issue did not arise.

npm i --save @polymer/[email protected]

I would have to say that it would be nice to keep the polymer-3-starter-kit to be updated to use the latest versions of polymer elements to avoid this issue.

[jajaperson]

Why does @polymer/paper-button have its own node_modules?

[brbnk]

After almost 1 year, I'm having the same problem when installing this module. There's also a lack of documentation and examples. When we find something, it's deprecated... really frustrating

edit: 1 year and two months