bundling @polymer/polymer and @polymer/iron-form using browserify and babelify

[adriangaro]

Description

importing @polymer/iron-form/iron-form.js after I imported @polymer/polymer/polymer-element.js This should work, but apparently the iron-form node module uses its own node_modules instead of the project one. Thus when bundled with browserify, polymer is bundled twice which when loaded into the browser, it throws this error "Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry"

Expected outcome

Everything should import and load into browser no problem.

Actual outcome

The browser throws this error:" Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry"

Live Demo

Steps to reproduce

inside index.js import these: require("@polymer/polymer/polymer-element.js"); require("@polymer/iron-form/iron-form.js");

bundle using browserify and babelify transform using global transpilation(--global necessary since polymer 3 appears to be using es6 imports)

include in browser and the error appears

Browsers Affected

• [x] Chrome
• [x] Firefox
• [x] Safari 9
• [x] Safari 8
• [x] Safari 7
• [x] Edge
• [x] IE 11
• [x] IE 10

[tedplumtree]

Just chiming in as a user here -- I solved this problem by using the exact same version of Polymer as your version of iron-form depends on (see package.json).

AFAIK this isn't just a problem with iron-form, but all Polymer elements.

[notwaldorf]

Yup, as per the first answer in the faq, you need to make sure you don't have different versions of Polymer. (also as @tedplumtree mentioned)