Search code examples
htmlpolymerweb-component

import multiple polymer web components in same file (getting error : .... a type with that name is already registered)

I just started using polymer for creating web-components.

When I import only one custom element everything is fine.

Now I want to use the polymer element iron-collapse in my custom web component and I want to import both of them in my HTML.

<link rel="import" href="../custom-accordion.html">
<link rel="import" href="../bower_components/iron-collapse/iron-collapse.html">

Both of the elements are positioned inside a dom-module Tag in their files:

<dom-module id="custom-accordion">
  ....content
</dom-module>

and

<dom-module id="iron-collapse">
   ....content
</dom-module>

When I want to import both I get the error : 

Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'dom-module'. A type with that name is already registered.)

I think I have to use this dom-module tag in both, otherwise I can't create my web-component. Right?

Any ideas how to solve this issue?

Solution

  • dom-module is Polymer. The issue is polymer is running twice and trying to register dom-module element. In your code you are just using the dom-module element.

    I am not sure how you are running your solution. Try below and see if it works

    1. If you have included polymer in index.html, try removing it.
    2. Try using polymer-starter-kit as your start. It takes care of most of these issues and comes packed with all the tools required to build a production ready polymer application. You can just focus on your code.