Material-components-web-components: "mwc-ripple" has already been used with this registry

Created on 6 Nov 2020 · 13Comments · Source: material-components/material-components-web-components

I have an interesting use case. We are importing web components that include mdc components in one php page and web components that include mwc components (0.18.0) in another php page. Our web components are written using StencilJs. When we switch from one page to another we get the following error:

DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "mwc-ripple" has already been used with this registry

I saw another issue with the same error get resolved in the latest version. That scenario involved the user of unpkg/cdn. We don't use that. We build the StencilJs web components and then take the resulting javascript and import the components directly in the page.

Source

jayhamilton

👍2

Most helpful comment

I made a simpler hack that just turns definition errors into warnings (after I had the same problem with another element)

<head>
  <script>
    (()=>{
      const _define = window.customElements.define.bind(window.customElements)
      window.customElements.define = ((tagName, klass) => {
        try {
          return _define(tagName, klass)
        }
        catch (err) {
          console.warn(err)
        }
      }).bind(window.customElements)
    })()
  </script>
</head>

n1ywb on 9 Nov 2020

👍2 👎1

All 13 comments

I can reproduce the issue over here. The code that triggers it is the following:

import '@material/mwc-button';

import '@material/mwc-icon-button';

If I use one or the other it works just fine (of course my application breaks).

darktears on 6 Nov 2020

@darktears are you seeing that with the 0.19.1?

jayhamilton on 6 Nov 2020

Yes, it works fine if I downgrade to 0.18

Code is located here: https://github.com/foldable-devices/demos/tree/master/battleship

Just bump the version in package.json.

darktears on 6 Nov 2020

Hmm, my problem is with version 0.18.0

jayhamilton on 6 Nov 2020

and

https://github.com/material-components/material-components-web-components/pull/1678

n1ywb on 8 Nov 2020

here's an ugly hack that works around the problem by monkey patching window.customElement.define and guarding against defining mwc-ripple twice

    (()=>{
      const _define = window.customElements.define.bind(window.customElements)
      let rippleDefined = false;
      window.customElements.define = ((tagName, klass) => {
        console.log('define custom element', tagName, klass)
        if (tagName == 'mwc-ripple') { 
          if (rippleDefined) {
            return 
          }
          else {
            rippleDefined = true;
          }
        }
        return _define(tagName, klass)
      }).bind(window.customElements)
    })()

n1ywb on 9 Nov 2020

@n1ywb yeah it seems like there are a number of related issues in this area. Thanks for the hack. Will give it a try.

jayhamilton on 9 Nov 2020

I made a simpler hack that just turns definition errors into warnings (after I had the same problem with another element)

<head>
  <script>
    (()=>{
      const _define = window.customElements.define.bind(window.customElements)
      window.customElements.define = ((tagName, klass) => {
        try {
          return _define(tagName, klass)
        }
        catch (err) {
          console.warn(err)
        }
      }).bind(window.customElements)
    })()
  </script>
</head>

n1ywb on 9 Nov 2020

👍2 👎1

Hey @jayhamilton

This usually happens when there are conflicting versions of our components in the same build. Hence the the failure to define a new component in CustomElementRegistry.

From your description alone, I might double check to confirm there aren't duplicate versions of material in your build.

But If you could provide us with examples, a little code, or your setup we might be able to help you further! :)

taylor-vann on 14 Nov 2020

Thanks Taylor. I will put something together this weekend. However, the issue simply is that we use Stencil JS to create web components. We just began to embed material web components (mwc) and material components web (mdc) into some of them. We have php pages that load various web components we produce.

jayhamilton on 14 Nov 2020

Very cool @jayhamilton, glad to hear about your team's webcomponent efforts!

The scenario you just described has the potential to cause a few naming conflicts. I'm also not exactly an expert in Stencil JS :)

But please keep us up to date on your progress! I'm sure others might have a similar background and could benefit from what you find :)

Talk soon!

taylor-vann on 14 Nov 2020

I have two Stencil web components that are included in an html page. The are imported separately as esm modules.
<script type="module" src="modulea.esm.js"></script><script type="module" src="moduleb.esm.js"></script>

modulea has the following import within its jsx template (Stencil uses JSX):
import "@material/mwc-button"; import "@material/mwc-textfield"; import "@material/mwc-select"; import "@material/mwc-list/mwc-list-item";

this component's package.json has the following dependencies:
"dependencies": { "@material/mwc-button": "^0.18.0", "@material/mwc-list": "^0.18.0", "@material/mwc-select": "^0.18.0", "@material/mwc-textfield": "^0.18.0", "@material/theme": "^7.0.0" }

moduleb uses the following imports

import "@material/mwc-list/mwc-list-item"; import "@material/mwc-list/mwc-list"; import "@material/mwc-textfield";

however I just realized that the package.json did not have the mwc-list and mwc-textfield dependencies. This condition produced the "mwc-ripple" error.

I updated package.json for the second component to use the same version of mwc-list and mwc-textfield used by the first component and the mwc-ripple error no longer appears. I now have a new error that I will need to investigate.

jayhamilton on 16 Nov 2020

Thanks for the analysis. Since you resolved your multiple versions issue, I'll close this issue. Thanks!