Can't get MUI 7 working with module federation (MUI 6 worked fine)

[nate-summercook]

Steps to reproduce

I've created a simple repo to reproduce my issue:
https://github.com/nate-summercook/test-mf-mui-project
Follow the steps from the readme.

Current behavior

Uncaught (in promise) TypeError: _emotion_styled__rspack_import_0 is not a function

no matter what I've put in the shared section of my module federation configuration, I couldn't get rid of this error.

Expected behavior

No errors and working MF 🙃

Context

In a project I'm working on, we're using React 18 (not migrated to 19 yet), MUI 6 and Module Federation (1.5) with rsbuild. This setup works and we don't have issues currently.

In the process of migrating MUI 6 to MUI 7 we encountered issues with shared modules in Module Federation:

Uncaught (in promise) TypeError: _emotion_styled__rspack_import_0 is not a function

We've tried many things: Changing the shared dependencies definition in the module federation configuration in all kinds of ways, migrating to Module Federation 2.0, etc. Nothing helped, also all kinds of AI tools were clueless on how to solve it.
Since it worked with MUI 6, I suspect it has something to do with MUI switching to an esm bundle. I suspect there's currently no way to use MUI 7 in a module federation context and here's my minimal project to try and prove that point.

Your environment

npx @mui/envinfo

System:
    OS: macOS 26.2
  Binaries:
    Node: 24.11.0 - /Users/***/.volta/tools/image/node/24.11.0/bin/node
    npm: 11.6.1 - /Users/***/.volta/tools/image/node/24.11.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 143.0.7499.110
    Edge: 143.0.3650.80
    Firefox: 146.0.1
    Safari: 26.2
  npmPackages:
    @emotion/react:  11.14.0
    @emotion/styled:  11.14.1
    @mui/core-downloads-tracker:  7.3.6
    @mui/material:  7.3.6
    @mui/private-theming:  7.3.6
    @mui/styled-engine:  7.3.6
    @mui/system:  7.3.6
    @mui/types:  7.4.9
    @mui/utils:  7.3.6
    @types/react:  18.3.27
    react:  18.3.1
    react-dom:  18.3.1
    typescript:  5.9.3

Search keywords: mui7, module federation, mf

[ZeeshanTamboli]

Have you taken a look at #46093, #47153 and #47404 issues?

[nate-summercook]

#46093: no response from original reporter, but I strongly suspect that the proposed solution wouldn't have worked.
#47153: I don't think removing @emotion/react & @emotion/styled from the shared dependencies is the right solution as they need to be singleton in order for themes to properly work.
#47404: check who wrote the last comment ;)
I have a reproduction repo there, you can see for yourself. I've tried lots of things, nothing helped. If there's ANY way to get my repo working, that'd be great...

[ZeeshanTamboli]

@Janpot Maybe you can help here? There were multiple issues of module federation with Material UI v7 as stated above. Maybe it is related to Emotion JS?

[ZeeshanTamboli]

@nate-summercook I changed the shared config in both container-app and components-app rsbuild.config.ts to:

  shared: {
    react: { singleton: true, eager: true, requiredVersion: '^18.3.1' },
    'react-dom': { singleton: true, eager: true, requiredVersion: '^18.3.1' },
  },

And the project was atleast running. However, I am not sure why we need to do this when using Material UI v7. cc @Janpot

I don't think removing @emotion/react & @emotion/styled from the shared dependencies is the right solution as they need to be singleton in order for themes to properly work.

Is that true? For Material UI theming to work across host + remote, the important part is that both sides use the same Material UI theming context (ThemeProvider). Or does it lead to duplicate styles injection?

---

Side note (not related to this issue):

Change Theme.ts to export a theme object, not a plain object, which you use in the ThemeProvider's theme prop:

import { createTheme } from '@mui/material/styles';

export const theme = createTheme({
  colorSchemes: {
    dark: true,
  },
});

light mode is enabled by default.

And:

- <ThemeProvider theme={theme.light}>
+ <ThemeProvider theme={theme}>

[nate-summercook]

Is that true? For Material UI theming to work across host + remote, the important part is that both sides use the same Material UI theming context (ThemeProvider). Or does it lead to duplicate styles injection?

Yes, it is true. I've changed my example to match what you did and added a regular MUI button next to my components button. Fixed the theming setup (I didn't get to that before because of all the errors, sorry about that ;) )
With these changes now you clearly see that the components button has default mui theme and the MUI button next to it is properly styled according to my theme. So the ThemeProvider doesn't work inside the components app, because it doesn't know the context. I used to share both the mui libraries (material & system) and emotion (react & styled) and that worked well with MUI 6.

emotion has to be singleton, else you get warnings and theming doesn't work. At least that's my understanding of the how it works.

[ZeeshanTamboli]

Is that true? For Material UI theming to work across host + remote, the important part is that both sides use the same Material UI theming context (ThemeProvider). Or does it lead to duplicate styles injection?

Yes, it is true. I've changed my example to match what you did and added a regular MUI button next to my components button. Fixed the theming setup (I didn't get to that before because of all the errors, sorry about that ;) ) With these changes now you clearly see that the components button has default mui theme and the MUI button next to it is properly styled according to my theme. So the ThemeProvider doesn't work inside the components app, because it doesn't know the context. I used to share both the mui libraries (material & system) and emotion (react & styled) and that worked well with MUI 6.

emotion has to be singleton, else you get warnings and theming doesn't work. At least that's my understanding of the how it works.

Got it. Makes sense.

LLM suggested to do this in both the rsbuild.config.ts:

export default defineConfig({
  resolve: {
    // Prefer CJS condition for packages that ship both.
    // This can change which entry is selected from `exports`.
    conditionNames: ['require', 'node'],
  },
....
....

And uncomment the emotion shared config. And it worked. The components button is now your theme color.

I didn't understand what that config does and how it works. I think it uses the CJS bundle.

[nate-summercook]

true, this gets my example to work, but somehow it seems rather like a hack than a proper solution. We're striving more towards esm from cjs, not from esm towards cjs ;)