emotion style does not work when using renderToString in React18

[vmaerten]

Current behavior:

With React 18 (works in React 17), when we use ReactDOMServer.renderToString(EMOTION_COMPONENT) the style is not injected in the head.

To reproduce:

1. Open this Sandbox: https://codesandbox.io/s/bug-rendertostring-with-react-18-7ty15q

Expected behavior:

Div BlockColorGreen should be green but no style is applied (class is present but no style injected)

Works fine with React 17, please see: https://codesandbox.io/s/not-bug-rendertostring-with-react-17-04vtp2

Environment information:

• react version: 18.0.0
• react-dom version: 18.0.0
• @emotion/react version: 11.9.0

[srmagura]

@Andarist Uhh.... do we support server-side rendering in the browser? 😅

[cforycki]

Probably the same underlying issue as this one #2691

[chandlervdw]

@srmagura @Andarist @cforycki any chance this will be addressed?

[shivamchamoli09]

Facing the same issue. Any update on this?

[cforycki]

@chandlervdw I'm not a contributor to emotion, I'm working with @vmaerten that's why I commented 😅

By the way, on our side we have a temporary solution, because we wanted to update to React 18 and this was the only thing that blocked us.

What we did was to render the original component in our page, inside a display: none so that it injects the style in the page like any other component but doesn't display it. And because the renderToString result string will be using the same class names, the style is applied.

See this codesandbox: https://codesandbox.io/s/bug-rendertostring-with-react-18-forked-m2un7b?file=/src/App.tsx

We are not working on performance sensible apps so for us it's enough