Andarist
commented
3 years ago In this situation, you really should use separate caches with unique keys - unfortunately <style/> elements are shared resources in the global document and we can't easily distinguish which belong to each of those microfrontends.
The problematic part though is that you are using hard dependencies for @emotion/react in each one and thus you load multiple instances of Emotion 11 so their context identities won't be shared. I guess that because you are in this microfrontend architecture this is a hard requirement for you so I would advise you to just export CacheProvider + createCache from each of your libraries~ and just wrap each React subtree in those CacheProviders.
So in the end you would handle things like this:
diff --git a/src/index.js b/src/index.js
index b55fafe..c350d6a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,8 @@ import React from "react"
import ReactDOM from "react-dom"
import styled from "@emotion/styled"
import css from "@emotion/css"
-
+import { CacheProvider } from "@emotion/core"
+import createCache from "@emotion/cache"
const getEmotion11Library1Chunk = async () => {
return await import("emotion-11-library-1")
@@ -14,13 +15,23 @@ const getEmotion11Library2Chunk = async () => {
setTimeout(() => {
getEmotion11Library1Chunk().then((chunk) => {
- ReactDOM.render(<chunk.Library1 />, document.getElementById(`placeholder1`))
+ ReactDOM.render(
+ <chunk.CacheProvider value={chunk.createCache({ key: "lib1" })}>
+ <chunk.Library1 />
+ </chunk.CacheProvider>,
+ document.getElementById(`placeholder1`)
+ )
})
}, 2000)
setTimeout(() => {
getEmotion11Library2Chunk().then((chunk) => {
- ReactDOM.render(<chunk.Library2 />, document.getElementById(`placeholder2`))
+ ReactDOM.render(
+ <chunk.CacheProvider value={chunk.createCache({ key: "lib2" })}>
+ <chunk.Library2 />
+ </chunk.CacheProvider>,
+ document.getElementById(`placeholder2`)
+ )
})
}, 4000)
@@ -34,6 +45,9 @@ const Title = styled.h1`
`
ReactDOM.render(
- <Title>Welcome!</Title>,
+ <CacheProvider value={createCache({ key: "app" })}>
+ {" "}
+ <Title>Welcome!</Title>
+ </CacheProvider>,
document.getElementById(`app`)
)Note that this doesn't fix your problem with Emotion 11 hijacking Emotion 10 styles - we've ensured that we don't try to hijack Emotion 10 SSR styles but we have missed the case with dynamically created Emotion 10 styles (or assumed that it will just work thanks to the same thing we've done for SSRed styles).
You can workaround this by doing this:
const emotion10Styles = document.querySelectorAll(
`style[data-emotion]:not([data-s])`
);
Array.prototype.forEach.call(emotion10Styles, (node) => {
node.setAttribute("data-s", "");
});before you fetch a bundle containing Emotion 11 code.
We can't do much for the first thing but we probably should try to handle the second problem and I will give this a thought.
gregjacobs
JSteunou
nelsondude
jackmoore
JamesRamm
michael-land
rleguen-broadsign
santyclaz
CodingItWrong
Current behavior: We've microservice architecture so each team can have their own emotion instance, in the same time they can even import other libraries that also use emotion. All apps getting loaded asynchronously. And when the next app is loaded, it creates own emotion instance that overwrites previous (at least it looks like so, but old tags still exist in DOM).
Yep, In
devmode we're getting the warn, but inproductionbuild all sheets getting overwritten.To reproduce: Main repo
npm ito install pseudolibraries and depsnpm run startto see the warnnrm run buildto see how one library overwrites another after 2 seconds (publicfolder)Library repo 1 Library repo 2
Expected behavior: Allow multiple instances of emotion
Environment information: