"Uncaught DOMException: ..."

[diregraph]

I am trying to use datetime-picker (it's elements) to make a custom element of my own to be used in a project. I am having the following error in the console despite the custom element being working properly (as far as I can see)

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-module.html:130:18
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-module.html:135:3
(anonymous) @ dom-module.html:130
(anonymous) @ dom-module.html:135
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-bind.html:129:20
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-bind.html:133:5
(anonymous) @ dom-bind.html:129
(anonymous) @ dom-bind.html:133
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-repeat.html:696:18
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-repeat.html:700:3
(anonymous) @ dom-repeat.html:696
(anonymous) @ dom-repeat.html:700
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-if.html:269:18
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/dom-if.html:273:3
(anonymous) @ dom-if.html:269
(anonymous) @ dom-if.html:273
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/array-selector.html:421:18
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/array-selector.html:424:3
(anonymous) @ array-selector.html:421
(anonymous) @ array-selector.html:424
custom-style.html:111 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/custom-style.html:111:25
    at http://127.0.0.1:8081/components/mrs-datetime-picker/bower_components/polymer/lib/elements/custom-style.html:113:3

one of my colleagues suspects this is because of Polymer 1 and Polymer 2 compatibility issue.

[fooloomanzoo]

• Which version of Polymer 1 are you using? Is it 1.9.2 or above?
• Are you using the newest Polymer-Cli for testing?
• Do you extend <datetime-picker> or are you using it in a template?
• Do you test in a custom demo or in that one of <datetime-picker>?

The exceptions you had are all related to polymer itself, a.s.o. are part of polymer itself. You could try at first, to update polymer-cli and see what happens. But I look into it!

[diregraph]

• It is 1.9.2+. Actually 2.x.x

• Yes I am using the latest Polymer-CLI

• Using it in a template

• Custom demo

If it is not too much of a trouble, Is it okay if I share with you the repo so that you may take a look?

[fooloomanzoo]

Shure, would be interesting

[diregraph]

mrs-datetime-picker

Thank you mate!

[fooloomanzoo]

The server of polymer-cli can not handle absolute import paths because it serves when developing a component as if all resources of the local bower_components are above the rootDir, so that when installed to a project the fileSystem is coherent. Probably the code transpilation is then mixed up.

Instead of:

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="./bower_components/datetime-picker/overlay-date-picker.html">
<link rel="import" href="./bower_components/datetime-picker/overlay-time-picker.html">
<link rel="import" href="../iron-icons/iron-icons.html">

you need to import all dependencies relatively:

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../datetime-picker/overlay-date-picker.html">
<link rel="import" href="../datetime-picker/overlay-time-picker.html">
<link rel="import" href="../iron-icons/iron-icons.html">

Then the demo is working. In polymer 3 the <link rel="import" href="...">-system will supposed to be replaced. Tip: have a look at the style mixins and properties of <datetime-picker> and <number-element> to customize your element.

[diregraph]

That worked. Thank you @fooloomanzoo, much appreciated!