polymer: Registration failed for type 'dom-module'/DuplicateDefinitionError: a type with name 'dom-module' is already registered

Description

First of all it took about 6 hours to realize what causes this error. So thanks to me.

After build error thrown when using any import other than [entrypoint].html in main index.html file.

In Firefox 49.0.2 error looks like this:

Error: DuplicateDefinitionError: a type with name ‘dom-module’ is already registered TypeError: Polymer.Base._getExtendedPrototype is not a function TypeError: this._desugarBehaviors is not a function

In Chrome Version 54.0.2840.71 (64-bit) looks like this:

Uncaught DOMException: Failed to execute ‘registerElement’ on ‘Document’: Registration failed for type ‘dom-module’. A type with that name is already registered. Uncaught TypeError: Polymer.Base._getExtendedPrototype is not a function Uncaught TypeError: this._desugarBehaviors is not a function

Steps to Reproduce

Create a new application/or clone this repo and skip next 2 steps
Add import in main index.html like it says in the flexbox docs in Example: using classes in the main document section. Like that:

<head>

  ...

  <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">

  ...

</head>

Add iron-flex-layout-classes in polymer.json includeDependencies property. Otherwise it won’t pick this dependency up.
Build with polymer build
Serve with polymer serve bundled/unbundled version of the app.
Get a lot of pain with the error above.

Expected Results

No error

Actual Results

Error. See above.

Browsers Affected

Chrome
Firefox
Edge
Safari 9
Safari 8 most probably yes
IE 11 most probably yes

Versions

Polymer-cli: v0.16.0, v0.17.0
Polymer: v1.7.0
webcomponents: v0.7.23

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 8
Comments: 23 (4 by maintainers)

Most upvoted comments

As it was mentioned before, you need to check how you import polymer.

If your entrypoint, usually index.html, loads polymer.html and then an app-shell element (say my-app) which loads polymer.html too, this could happen because polymer gets bundled to app-shell but also is being loaded from entrypoint, and those imports cannot be de-duplicated.

In general, if you are developing SPA, always include only app-shell element in index.html and after bundling you will be fine. We are doing so for almost a year with no problems.

web-padawan on Mar 2, 2017

I’m facing the same issue when loading components from multiple sources (Web API 1 and Web API 2) into one webpage. Both use the same version of Polymer, however the urls for loading Polymer differ.

I can load components built with x-tag or “native (ES6)” ones from multiple different sources without any issues. Sadly my current approach can now not support Polymer and all nice existing web components built with Polymer like paper-elements and iron-elements.

Is this issue resolved in version 2.0 of Polymer, or should this issue also be labeled with 2.x? Is there syntax that allows me to check whether one of the components already imported Polymer and with that knowledge prevent other components from importing it more than once?

This issue seems to be related to: https://github.com/Polymer/polymer/issues/357 but has been closed due to inactivity.

Are there current plans for allowing Polymer to be loaded side-by-side? Or just once into the main webpage? Using multiple cdns for importing components are limited by the current approach as well.

MaxMommersteeg on May 4, 2017

I don’t think we should try to let Polymer be allowed to load twice. A nicer way would be to have a descriptive error message which describes the issue (e.g. something along the lines of Polymer has already been defined. Make sure you load Polymer once by deduplicating the load URLs) instead of the non-descriptive vague Failed to execute ‘registerElement’ on ‘Document’: Registration failed for type ‘dom-module’.

This is not practical for enterprise applications.

Consider the case where an application is a container of other applications (a very common enterprise app scenario). In such environments the other applications are being developed and hosted independently. Hence one cannot ensure that Polymer is loaded only once and thus the limitation of not loading it again is a blocker for enterprise adoption. i.e. Polymer should check is its already defined and if not only then it should load.

This might be worked around by using iframes however Polymer should not force us to use them. Another workaround is to force all teams to load all common dependencies on say a CDN and include that in the container. However, again its a hack as it would kill application performance depending on the number of dependencies added on this central location so that de-duping works.

I think that https://github.com/w3c/webcomponents/issues/716 is a step in this direction however, at the moment a fix for this is needed in polymer as adoption in WC might take a while.

osamamaruf on Oct 4, 2018

As @web-padawan said, the OP’s problem can be solved by moving the import for iron-flex-layout-classes out of index.html into demo-app.html (and removing it from includeDependencies).

The includeDependencies is intended for things the analyzer can’t discover, and should just copy over to the build folder. So it copies over iron-flex-layout-classes.html, which imports the (unbundled) Polymer. Meanwhile, the built demo-app.html ends up containing a bundled copy of Polymer.

arthurevans on Mar 2, 2017

We’re receiving this exact same error after including an internal fork of app-localized-behavior to one of our components while running tests.

RyanCopley on Feb 7, 2017