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

[ainyava]

Hello, the problem is when using the MWC components inside react components that are exposing some components through Webpack Module Federation:

The apps standalone are working fine but if you want to use them together you will get the error: Failed to execute 'define' on 'CustomElementRegistry': the name "mwc-ripple" has already been used with this registry

Example Scenario:

• App1, App2 are using MWC components and working fine standalone
• Host imports App1, App2 to use their components and the error would throw

I've tried these possible solutions but did not fix the issue:

1. Module federation shared libs with { singleton: true }
2. moving MWC to single app that all apps importing from there

Please check and fix the problem, Thanks

[chandruchiku]

I'm having the same issue where I have 2 web components which are individually importing mwc-button and mwc-list. When I tried to import my custom components into a SPA, this error is thrown.

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

I'm using vite for build along with Lit

[asyncliz]

Obsolete with M3, this won't really be an issue anymore with a single @material/web package