Getting duplicate registry when importing Paper-Input in polymer 3.0

[igniparra]

Description

Having these imports:

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; import { setPassiveTouchGestures, setRootPath } from '@polymer/polymer/lib/utils/settings.js'; import '@polymer/app-layout/app-drawer/app-drawer.js'; import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js'; import '@polymer/app-layout/app-header/app-header.js'; import '@polymer/app-layout/app-header-layout/app-header-layout.js'; import '@polymer/app-layout/app-scroll-effects/app-scroll-effects.js'; import '@polymer/app-layout/app-toolbar/app-toolbar.js'; import '@polymer/app-route/app-location.js'; import '@polymer/app-route/app-route.js'; import '@polymer/iron-pages/iron-pages.js'; import '@polymer/iron-selector/iron-selector.js'; import "@polymer/paper-button/paper-button.js"; import "@polymer/iron-flex-layout/iron-flex-layout-classes.js"; import "@polymer/paper-dialog/paper-dialog.js"; import "@polymer/paper-input/paper-input.js"; import './my-icons.js';

The paper-input import breaks the app, saying that the name of the CustomElement has already been used.

Actual outcome

Uncaught 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/iron-meta/iron-meta.js:131:1

UPDATE: I've noticed that it has to do with this import: import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; on paper-input.js. It looks like another of my import has the same import, but removing it doesn't work.

I tried editing Polymer-fn.js like this: if(customElements.get(klass)!=null) { customElements.define(klass.is, /* @type {!HTMLElement} /(klass)); return klass; } else{ return customElements.get(klass); }

But it now throws: Uncaught TypeError: Cannot set property 'instance' of undefined at iron-a11y-announcer.js:105

I don't know what else to try.

Steps to reproduce

Set up the sample page on polymer 3.0, and add those dependencies.

Browsers Affected

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

[anologicon]

Hi, I'm using iron-input, and they're giving it the same, it seems that paper-input also uses iron-punt, can it be the one that's generating it?

[herberthobregon]

This seems to be a duplication error of the polymer.js element

try

rm node_modules -rf
rm package-lock.json
npm i

Make sure that no component extracts some bower_components files

Update: I wrote a / of more @zboralski sorry :(

[zboralski]

@herberthobregon rm -rf / ... really? that's quite a nasty typo and I hope no one just cut and paste it as root

[notwaldorf]

Yup, the problem is that you're importing polymer twice. Check out the second answer in the faq for a workaround

[flatmax]

The FAQ workaround is not the best solution IMO. 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