md-elevation has already been used with this registry

[zZHorizonZz]

I'm currently using material-web components with lit/react, but I'm encountering a strange issue. On certain pages, I receive the following error:

Error: Failed to execute 'define' on 'CustomElementRegistry': the name "md-elevation" has already been used with this registry

I suspect the issue arises when the page includes components using the material-web component "md-elevation" (for example elevated buttons, chips, progress, fab, etc)
I create React components using Lit/React's createComponent method. Here's an example:

"use client";

import React from "react";
import { createComponent } from "@lit/react";
import { MdElevatedButton } from "@material/web/button/elevated-button.js";

export const ElevatedButton = createComponent({
 react: React,
 tagName: "md-elevated-button",
 elementClass: MdElevatedButton,
});

My research suggests this might be a known issue with Lit, as discussed here and here. However, I could be wrong. I would greatly appreciate any help or insights from the material-web team.

[asyncLiz]

Are you using or embedding your component in an application where someone else is also using @material/web? This error appears when multiple versions of @material/web are loaded at the same time on the page.

If you're not loading other code that is using MWC, your build may not be code splitting or bundling properly, causing additional copies of MWC to be loaded.

[Jhoscy]

Hi @asyncLiz I've just tried to do the same as @zZHorizonZz and I have exactly the same warning in terminal. I think the issue is related to the mismatch of lit version between react and the web-component.

For example, I have installed "@material/web": "^1.5.0", in React I have installed "@lit/react": "^1.0.5" and when I try to import a FilledButton we do like this:

import { createComponent } from '@lit/react';
import { MdFilledButton as MdFilledButtonWebComponent } from '@material/web/button/filled-button.js';
import React from 'react';

const MdFilledButton = createComponent({
    tagName: 'md-filled-button',
    elementClass: MdFilledButtonWebComponent,
    react: React,
});

Checking inside the @materia/web package, the lit version is "lit": "^2.7.4 || ^3.0.0" that is different than the @lit/react.
So we use @lit/react to render MdFilledButtonWebComponent but the MdFilledButtonWebComponent use "lit": "^2.7.4 || ^3.0.0" itself.

Could it be this the source of the problem and do u have any hints on this ?

[asyncLiz]

I don't think so. @material/web supporting both lit v2 and v3 shouldn't cause this error. To be safe though, you can try updating your lit and mwc dependencies to the latest version.

It's more likely that the project's JS bundling is including multiple copies of MWC by accident.

[gunnarmein-ts]

I just came across this issue myself. Still don't know which component loads material the first or second time, but changing my HTML to no longer import the material min.js file (like the m3w quickstart suggests to do) and instead importing the needed components at the beginning of my code bundle helped:

`import "@material/web/tabs/tabs";
import "@material/web/tabs/primary-tab";
import "@material/web/tabs/secondary-tab";
import "@material/web/icon/icon";
import "@material/web/textfield/filled-text-field";
import "@material/web/switch/switch";
import "@material/web/dialog/dialog";
import "@material/web/button/text-button";

import type {MdDialog} from "@material/web/dialog/dialog.js";
import type {MdFilledTextField} from "@material/web/textfield/filled-text-field";`

Note that I had to import the whole component first, then the type also to reference properties and methods in my code.

Hope this helps - YMMV