Material-ui: Nested theme providers not working correctly when used with webpack module federation

[codepunkt]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Two ThemeProviders are nested. One is the outer and spans the whole Application tree, setting primary color to green the other one is nested into it, setting primary color to hotpink. I also have two buttons - one inside the outer ThemeProvider, sibling to the inner ThemeProvider, the other inside the inner ThemeProvider.

A little like this:

<ThemeProvider theme={/* green primary */}>
  <Button color="primary">should always be green</Button>
  <ThemeProvider theme={/* hotpink primary */}>
    <Button color="primary">should always be hotpink</Button>
  </ThemeProvider>
</ThemeProvider>

However, the inner ThemeProvider is asynchronously loaded, using webpack module federation (not sure if this even matters, it's a rather basic React.lazy think, lazy loading a webpack chunk). However, it is coming from a different application - so there might be something about "seed" that i don't get here.

What happens ins that as long as only the outer ThemeProvider is rendered, the Button that should be green is green.
Once the inner ThemeProvider is loaded and rendered aswell, the outer Button switches to hotpink and thus has the same color as the inner Button - which it shouldn't.

Expected Behavior 🤔

Outer Button stays green.

Steps to Reproduce 🕹

Not easily reproducible on codesandbox due to module federation.

This is the commit with the reproduction:
https://github.com/codepunkt/react-microfrontend-eval/commit/b5e9284cadc9bf964442c0ed191530edc4dcca6c

Steps:

1. Clone
2. Switch to commit
3. Run "yarn" in toplevel folder
4. Change directory to "federation" folder
5. Run "yarn start" in federation folder
6. See problem in effect on localhost:3000

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.11.0 |
| React | v16.13.1 |
| Browser | Any |
| TypeScript | v3.9.6, should not be related |

[oliviertassinari]

The symptoms makes me think that the React context singletons are duplicated between the different modules. What if you move @material-ui/styles as a shared package?

[oliviertassinari]

In any case, I'm not aware that we have any leverage toward the bundling duplication of a variable that was designed to be a singleton. As far as I know, react is also a singleton, if you treat @material-ui/styles identically, it should solve your problem.

Let us know if you find a solution, it will likely help others :).

[AlessandroAnnini]

Hi @codepunkt did you solve this? how?

[codepunkt]

@AlessandroAnnini I had to tread @material-ui/styles as a singleton