emotion/react issue in micro frontend - "You are loading @emotion/react when it is already loaded"

[romeodancil]

Hello

I keep getting this warning message in my micro frontend single spa.

i also ask this here single-spa/single-spa#943 but i got no response yet.

Anyone know how to fix this please?

Thank you guys in advance.

[Andarist]

It's preferred to only load a single version of Emotion, just like it's preferred to only load a single version of React. It ensures that some features will work better and that you don't run into some edge cases etc.

[romeodancil]

turns out i have to do it via webpack external in each on my micro frontend and warning is now fixed. Thank you guys and sorry for the confusion.

[alexlabrioche]

hello @romeodancil I think I'm running into the same problem with a Turborepo and multiples instances of Emotion loaded in Storybook and our custom UI lib. How did you manage to configure correctly the externals key in the webpack config?
thanks

[romeodancil]

@alexlabrioche

In your import maps add this two.

"@emotion/react": "https://cdn.jsdelivr.net/npm/@emotion/react@11.8.1/dist/emotion-react.umd.min.js",
"@emotion/styled": "https://cdn.jsdelivr.net/npm/@emotion/styled@11.8.1/dist/emotion-styled.umd.min.js",

And then each of your micro frontend add the following in your webpack.

externals: [
      '@emotion/react',
      '@emotion/styled',
],

It will remove the emotion react from the bundled js file and get the one from import maps. Some goes with other libraries that you want to be remove.

Let me know if it works on you as well. Good luck and happy coding :)