Search code examples
javascriptpolymerpolymer-2.x

Polymer Uncaught DOMException


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>

enter image description here


Solution

  • 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.