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

• 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 :
Polymer/polymer#5407