I have a simple todo aap in Polymer 2. It works perfectly but when I add elements from Polymer catalog then I get the following error? And also the paper-input doesn't display properly? Check the screenshot. Everything was working perfectly I don't know why this happened suddenly?
dom-module.html:136 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at http://127.0.0.1:8000/components/polymer-todo/bower_components/polymer/lib/elements/dom-module.html:136:18 at http://127.0.0.1:8000/components/polymer-todo/bower_components/polymer/lib/elements/dom-module.html:140:3
My code is very simple
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer/lib/elements/dom-repeat.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<dom-module id="polymer-todo">
<template>
<h3>Todo:</h3>
<dom-repeat
items="{{tasks}}"
as="task">
<template>
<div>
<paper-checkbox ></paper-checkbox>
<paper-input value="{{task}}"></paper-input>
</div>
</template>
</dom-repeat>
<button>Add task</button>
</template>
<script>
/**
* `polymer-todo`
* Simple to do to add Todos
*
* @customElement
* @polymer
* @demo demo/index.html
*/
class PolymerTodo extends Polymer.Element {
static get is() { return 'polymer-todo'; }
static get properties() {
return {
tasks: {
type: Array,
value: () => [1, 2, 3, 4, 5]
}
};
}
}
window.customElements.define(PolymerTodo.is, PolymerTodo);
</script>
</dom-module>
I fixed it. Actually I changed
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
etc To
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
And it worked.