[question] Multiple instances of MUI and Emotion in the same page

[CodingItWrong]

Order ID 💳

50070

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

We would like to use MUI and MUI X in a microfrontends context. Each microfrontend team needs to be able to upgrade at their own pace, so we would like each microfrontend to have its own instance of MUI and Emotion. But Emotion gives a warning that it is risky to run multiple instances of Emotion. A few questions:

• Can you point us to any recommendations or examples of running multiple instances of MUI in a microfrontends context?
• In MUI, how much risk is there of actual problems from running multiple instances of Emotion?
• What large breaking changes are on the horizon for future major versions of MUI? (If the changes are not too large, this affects whether we prioritize independently upgrading microfrontends.)

Thank you.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.6.1
  Binaries:
    Node: 18.12.0 - ~/.nvm/versions/node/v18.12.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.0/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.0/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Edge: Not Found
    Firefox: 106.0.4
    Safari: 16.1
  npmPackages:
    @emotion/react: ^11.10.4 => 11.10.4
    @emotion/styled: ^11.10.4 => 11.10.4
    @mui/base:  5.0.0-alpha.103
    @mui/core-downloads-tracker:  5.10.11
    @mui/icons-material: ^5.10.9 => 5.10.9
    @mui/material: ^5.10.10 => 5.10.11
    @mui/private-theming:  5.10.9
    @mui/styled-engine:  5.10.8
    @mui/system:  5.10.10
    @mui/types:  7.2.0
    @mui/utils:  5.10.9
    @mui/x-data-grid:  5.17.9
    @mui/x-data-grid-pro: ^5.17.9 => 5.17.9
    @mui/x-date-pickers: ^5.0.5 => 5.0.5
    @mui/x-license-pro:  5.17.0
    @types/react:  18.0.22
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0

Target browsers: desktop Chrome, Edge, FF, Safari

[m4theushw]

I'm moving this issue to https://github.com/mui/material-ui since most questions are related to the use of MUI Core.

What large breaking changes are on the horizon for future major versions of MUI? (If the changes are not too large, this affects whether we prioritize independently upgrading microfrontends.)

I can only speak about MUI X. Currently we're developing the v6 version of the DataGrid. We don't plan in having "large" breaking changes, the changes we're doing are only the renaming and removal of some APIs, mostly for consistency. You can find more about the MUI X breaking changes in mui/mui-x#3287

[mnajdova]

Here is more information on setting up emotion for microfrontends: emotion-js/emotion#2639. You should basically do what you are doing with react.

We don't expect some major breaking changes for the next version of Material UI (which currently is planned for Q4 2023). We are at this moment mostly focused on the new products MUI Base and Joy UI, and as for Material UI, the plan is to enable people to use Material You (the third version of Material Design), but that would be through new components, so it shouldn't affect existing users.