Single Spa Micro fontend @emotion/react issue with multiple emotion/react loaded with they same version

Question

I have a codebase structured as in single spa micro fontend in react. With mui5 and emotion/react for layouts and designs. Now in each micro frontend i have e separate package.json in it. With emotion/react installed in each micro fontend. My problem now is i have this warning message in the console.

Tried using this https://single-spa.js.org/docs/recommended-setup/#sharing-with-import-maps but looks like it did not fix it at all.

Does someone also have they same issue?

Answer 1

The problem is that you probably have more than one app loading the @emoticon/react simultaneously. When the library is loading, it will check whatever the flag window.__EMOTION_REACT_11__ (in my case, using @mui/material@5), and if this flag returns true, it will throw the warning.

This is not much to concern if all of your apps are using the same version of MUI5. This is more of a warning to let you know that it could be an issue if the versions start to differ. The lib will not load a new version if the flag mentioned before return true.

But, if you still want it to go away, you can load the CDN for material UI and emoticon while setting them as external in each app webpack configuration.

{ webpack: {
    configure: {
      externals: [
         'react',
         'react-dom',
         'single-spa',
         new RegExp(`^@${orgName}/`),
         new RegExp(`^@mui/`),
         new RegExp(`^@emoticon/`)
      ]
    },
  }
}