Activating the Loom browser extension causes my emotion-based site to break

Current behavior:

I have an SSR setup with emotion using babel-plugin-emotion with default configuration. The initial HTML response from my server renders the site correctly. Among other interesting parts, it looks like this:

However, once the client bundle takes over, it looks like this:

Here’s the fun part: I have the Loom extension activated. If I disable it, the footer renders correctly both before and after the client bundle takes over.

I read the CSS injected by Loom, but there are no clashing classes.

What I could observe was that after my client bundle loads, some of emotion’s style tags are removed from the head. My suspicion is that Loom also has an instance of emotion and it’s running [extractCritical](https://emotion.sh/docs/ssr#extractcritical) on my code? This sounds unlikely because extractCritical is supposed to run on top of the rendered tree from React, which would only affect their app.

To reproduce:

I’m sorry, but I can’t produce a minimal reproducible example because I don’t know where the problem originates. So I have to direct you to the website in question:

1. Use Chrome/Chromium, because Loom only works on Chrome/Chromium.
2. Install the Loom extension.
3. Visit this website.
4. Play around activating and deactivating Loom using chrome://extensions/ to see how that affects the website.

Expected behavior:

The header and the footer on my website do not break after the client bundle loads.

Environment information:

• react version: 16.10.2
• @emotion/core version: 10.0.22
• babel-plugin-emotion version: 10.0.22

Note:

I’m aware that this may just be a problem with the Loom extension. I wanted to raise this here, too, in case it’s a bug in emotion.

[fnune]

I’ve asked them to leave a post-mortem here, we’ll see ☺️

[alexbonine]

For future devs that land on this page, I was able to use @emotion/css/create-instance to create and export with a custom instance. I then replaced all imports of @emotion/react. I was not able to use createContext as it executes just by importing it into the build without even calling ReactDOM.render. The solution and more info here on the createContext issue: https://github.com/emotion-js/emotion/issues/2210#issuecomment-790783310.