polymer 1.0 .. importing a catalog element with a custom element throws an error

Question

Had created and used my custom polymer element which is a table. Now, I want to use the check box element from their catalog in my table.

However, I keep getting this error when I reference the check box html file in my index page:

DuplicateDefinitionError: a type with name 'dom-module' is already registered

This is how I have created my custom element:

<!-- Imports polymer -->
<link rel="import" href="polymer/polymer.html">
<script  src="underscore-min.js"></script>

<!-- Defines element markup -->
<dom-module id="custom-table" >
    <template>
    <style>
    ul {list-style-type:none; display:block}
    ul li {display:inline; float:left; padding:20px; width:1.5em;  border-bottom:1px solid #eee}
    </style>
    <h2>{{title}}</h2>

    <table id="dataTable">
    <thead id="tableHead"></thead>
    <tbody id="tableBody"></tbody>
    </table>

    </template>
</dom-module>

<!-- Registers custom element -->
<script>
Polymer({
    is: 'custom-table',

    // Fires when an instance of the element is created
    created: function() {
    },

    // Fires when the local DOM has been fully prepared
    ready: function() {
    var context= this;
    this.pageNo=0;
    this.totalPages=0;
    // set the default paging size:
    if(this.page== null|| this.page==undefined)
    this.page=10;

    // delegate the change selection handler to the table body
    this.$.tableBody.addEventListener("click",function(e){

    if(e.target && e.target.nodeName == "INPUT") ;
    {
        context.changeSelection(e.target);
    }   

    });
    },

    // Fires when the element was inserted into the document
    attached: function() {},

    // Fires when the element was removed from the document
    detached: function() {},

    // Fires when an attribute was added, removed, or updated
    attributeChanged: function(name, type) {

    alert("changed");

    },

    loadData: function(columns,data){

    this.data = data;
     // add the selected property to the values
     for(var i=0;i<this.data.length; i++) { this.data[i].Selected = false;}
    this.filteredData=this.data;
    this.columns = columns;

    //initialize the filteredData 
    this.filteredData=data;
    // calculate the total number of pages 
    this.totalPages= Math.ceil(data.length/this.page);


    this.drawTableHeader();
    _.defer(this.applyFilters,this);
    _.defer(this.drawTableBody,this);


    },
    drawTableHeader:function(){

    var columns = this.columns;
    // load the header
    var headTr = document.createElement('tr');
    //add a blank header for the check box;
    var th=document.createElement('th');
    headTr.appendChild(th);
    for(var i = 0; i<columns.length ;i++)
    {


        var td=document.createElement('th');
        // if the column is sortable then add the event listener for sorting it
        if(columns[i].Sortable)
        {

            td.addEventListener("click",function(){  this.sortBy(columns[i].Title); });
        }
        td.innerText = columns[i].Title;
        headTr.appendChild(td);
    }
    this.$.tableHead.appendChild(headTr);

    },
    drawTableBody: function(context){
    // this is a defered function
    var context = context;
    // get the number of items according to the current page number

    var pageItems= context.filteredData.slice((context.page*context.pageNo),((context.page*context.pageNo)+context.page));
    console.log(pageItems);
    // print the page items

    for(var i=0; i < pageItems.length; i++)
    {
        var currItem = pageItems[i];
        var tr= document.createElement("tr"); 

        // add the check box first
        var checkbox= document.createElement("input");
        checkbox.type="checkbox";
        checkbox.checked=pageItems[i].Selected;
        var ItemId = currItem.Id;
        checkbox.setAttribute("data-ItemId",ItemId-1);
        var td=document.createElement('td');
        td.appendChild(checkbox);
        tr.appendChild(td);

        // for every column specified add a column to it

        for(var j = 0; j< context.columns.length; j++)
        {
            var td=document.createElement("td");
            td.innerText= pageItems[i][context.columns[j].Title];
            tr.appendChild(td);
        }

        //append the row to the table;
        context.$.tableBody.appendChild(tr);


    } // end for i

    },
    applyFilters:function(context){

        if(context.filter)
        {
            alert("filterApplied");
        }

    },
    changeSelection:function(checkbox){

        var ItemId = checkbox.getAttribute("data-ItemId");
        this.data[ItemId].Selected= checkbox.checked;
        console.log(this.data[ItemId]);
    },
    properties:{

    title :String,
    columns:Array,
    data:Array,
    page:Number,
    filters:Object,
    Selectable:Boolean

    }
});
</script>

and here is what my index page looks like:

<!doctype html>
<html>
<head>

    <meta charset="utf-8">
    <title>&lt;my-repo&gt;</title>

    <!-- Imports polyfill -->
    <script src="webcomponents-lite.min.js"></script>

    <!-- Imports custom element -->

    <link rel="import" href="my-element.html">
    <link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">

</head>
<body unresolved>

    <!-- Runs custom element -->
    <custom-table title="This is data table"></custom-table>
    <script>

document.addEventListener("WebComponentsReady",function(){

var data = [{'Id':1,'firstName':'aman',age:25},{'Id':2,'firstName':'gupta',age:25}];
var cols = [{Title:'firstName',Sortable:true},{Title:'age',Sortable:false}];
var a = document.querySelector('my-element');

a.loadData(cols,data);


});

</script>
</body>
</html>

I've just started out with polymer and I'm not quite sure what's going on here.. Thank you in advance :)

Answer 1

I'm using Polymer Starter Kit Yeoman generator on Windows and I had the same problem:

Error: DuplicateDefinitionError: a type with name 'dom-module' is already registered

This error is triggered in Firefox console. Chrome works fine.

The components created with the generator (example: yo polymer:el my-element) have this polymer.html import:

<link rel="import" href="..\..\bower_components/polymer/polymer.html">

The base path is described with "backslash". In some custom polymer elements I created by myself, I imported polymer.html with:

<link rel="import" href="../../bower_components/polymer/polymer.html">

And I think this lead to a duplication of some kind. To solve the problem, I just changed all automatically created imports, using only forward slashes /.

Hope this helps someone.

Answer 2

I got what the problem is..

My custom element was referencing a different Polymer.html file.

Silly me :D