Failed to execute 'define' on 'CustomElementRegistry'

[heruan]

With both 14.0.5 and 15.0.0.alpha1 my app won't load and throws this client exception:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "dom-module" has already been used with this registry
    at eval (webpack-internal:///../node_modules/@axians/axians-app-layout/node_modules/@polymer/polymer/lib/elements/dom-module.js?babel-target=es6:181:16)

I've found Polymer/polymer#5407 but I'm not sure how apply the workaround with Vaadin. Also, removing node_modules and package-lock.json isn't helping!

[Artur-]

Try running npx find-duplicate-dependencies in your project

[heruan]

Seems like there are not duplicates:

npx: installed 315 in 21.957s
There are no duplicate dependencies in your package. Congratulations!

[heruan]

Maybe it's something with the imports of my component?

import { LitElement, TemplateResult, CSSResult, css, html, customElement, property, unsafeCSS } from 'lit-element';
import { cssFromModule } from '@polymer/polymer/lib/utils/style-gather';
import '@polymer/iron-media-query';
import '@vaadin/vaadin-lumo-styles/style.js';
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/sizing.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
import '@vaadin/vaadin-lumo-styles/typography.js';
import '@vaadin/vaadin-tabs';

/**
 * The main layout of the app.
 */
@customElement('axians-app-layout')
export class AxiansAppLayout extends LitElement {

  static get styles(): CSSResult[] {
    return [unsafeCSS(cssFromModule('lumo-color')),
      unsafeCSS(cssFromModule('lumo-typography')), css`
      :host {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }
      :host([hidden]) {
        display: none !important;
      }
      /* ... */
    `];
  }
  /* ... */
}

[Artur-]

node_modules/@axians/axians-app-layout/node_modules/@polymer/polymer/lib/elements/dom-module.js
This indicates that the @axians/axians-app-layout dependency includes its own version of @polymer/polymer which will conflict at runtime with the main version you will find in node_modules/@polymer/polymer. Not sure why find-duplicate-dependencies would not see that

[heruan]

Maybe it's a Webpack issue? Is it possible to run the app without bundles?

[mehdi-vaadin]

@heruan Would you please provide a minimal example on how to reproduce this issue?

[heruan]

@mehdi-vaadin Sure, this project reproduces: https://github.com/heruan/vaadin-npm

$ mvn install
$ cd vaadin-npm-app
$ mvn jetty:run

Then goto http://localhost:8080 and look at the console.

[heruan]

@mehdi-vaadin Did you succeed to reproduce? Any workaround is welcome!

[mehdi-vaadin]

It gives me this error:

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@axians%2faxians-icon - Not found
npm ERR! 404 
npm ERR! 404  '@axians/axians-icon@^1.0.0' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of '@axians/axians-app-layout'
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

There is no public axians-icon npm package.

[heruan]

@mehdi-vaadin Sorry, my fault. Should be public now!

[mehdi-vaadin]

Now, I could reproduce it. Your problem seems to be caused by the fact that you are using two different versions of Polymer, 3.0.0 and 3.3.0. Since Vaadin doesn't support Polymer 3.3.0 yet (See
#6009), you should use Polymer 3.0.0 in your components.

[heruan]

Okay, thanks! Can I use 3.0.0 just when running the Vaadin app, without downgrading in the components?

[mehdi-vaadin]

I'm not sure about that. Maybe. Please try it and share your finding with us ;)

[heruan]

I mean, I don't know how to "use Polymer 3.0.0" in my components. I don't really depend on it, just on lit-element. How can I instruct Vaadin to bundle just Polymer 3.0.0?

[mehdi-vaadin]

According to your package-lock.json, @axians/axians-app-layout has a dependency on @polymer/polymer 3.3.0. If you don't use it you should remove it.

    "@axians/axians-app-layout": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/@axians/axians-app-layout/-/axians-app-layout-1.0.0.tgz",
      "integrity": "sha512-/lK82SpmCyvWzwh+/odGXRQ+zDY7ephLVO9/So+LseJGiOAQfGIBffnVEMteYLVSumCs1XRvehrhJzhi9+QyIg==",
      "requires": {
        "@axians/axians-icon": "^1.0.0",
        "@polymer/iron-media-query": "^3.0.1",
        "@polymer/polymer": "^3.3.0",
        "@vaadin/vaadin-button": "^2.2.1",
        "@vaadin/vaadin-lumo-styles": "^1.5.0",
        "@vaadin/vaadin-tabs": "^3.0.4",
        "lit-element": "^2.1.0"
      },

[mehdi-vaadin]

@heruan did you manage to fix the problem? Can this issue be closed?

[heruan]

Yeah, downgrading to Polymer 3.0.0 fixed the issue. I'll follow-up on #6009 to know when I can upgrade again! Thanks Mehdi!