Is it possible to create a emotion cache in the Server mode on browser?

[Jack-Works]

Current behavior: Use emotion cache with @emotion/server cannot extract CSS on the browser.

To reproduce:

https://codesandbox.io/s/emotion-issue-template-forked-ij0lf7?file=/src/main.jsx

Expected behavior: I want to run SSR in browser

Environment information:

• react version: 17
• @emotion/react version: 11

[knutmarius]

@jmeiss , I still haven't found a better workaround than forcing a delayed redraw of the chart:

  useEffect(() => {
    setTimeout(() => {
      chartRef.current?.chart.redraw();
    }, 0);
  });

This is however a very bad solution, and I would very much like to change. it. Have you found a better solution?

[knutmarius]

@jeffshaver Did you find a decent solution for this in the end? It's been bugging the h*** out of me for a long time. The workaround version described here, using flushSync, has turned out to have a bunch of side effects and causing various other bugs, so I'd really like to get away from that solution.

Using MUI React components with a non-react library like Highcharts is not ideal at all, but I'd really want to make it work because we are so reliant on Highcharts, and all the rest of our code uses MUI, so not being able to use MUI within the highcharts datalabels and tooltips is kind of problematic.

Seemed like you had a similar problem here, so just wanted to reach out and see if you found a better solution. It does not seem like this issue has been solved with newever versions of Emotion/MUI

[jeffshaver]

@knutmarius so our solution that made everything work was to call both root.render in a Flush Sync as described here. but after the flush sync, also calling ReactDOM.render.

the issue now is that with React 19 beta, ReactDOM.render is removed. so we are essentially stuck on React 18.

my only other option really is literally writing html as strings instead of rendering jsx into a dom node.

otherwise, more than half the time, the dom nodes inner html is an empty string