SSR Styling issue

Hi, I’m using Next.js (Blitz.js) and there’s an issue with the example provided in here. When I refresh the page in a particular route (/login for example) all the styles are removed (SSR rendering)

And it seems to be related to the useEffect from the _app.js mentioned in the guide

  useEffect(() => {
    const jssStyles = document.getElementById("mantine-ssr-styles")
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles)
    }
  }, [])

If I remove that the styles are in place again when I refresh the route /login but the theme light/dark isn’t working, the elements don’t switch the theme properly.

In the main route localhost:3000 the issue is not reproducible, only in internal routes.

I’m using the latest mantine version with react-jss.

[rtivital]

Alright, I’ve investigated the issue with blitz and found out it uses experimental Suspense API, which does not support server side rendering, once it’s out we will run some additional testing and fix an issue if this happens again, for now I’ll close these issues

[rtivital]

I’ve managed to replicate SSR issue with mantine docs. If you refresh page with component which uses Portal (e.g. Modal) some styles will be corrupted – https://mantine.dev/core/drawer/ These two things must be connected