No styles at all in next SSR with react 18 and next 12.1.6

[bdew]

I don't know if it's related to whatever was fixed in #78 but after this update I'm not getting almost any styles (neither MUI default nor useStyles) in SSR.

The only styles coming from SSR are those 2 small snippets

After hydration it fixes itself and looks correct. Also doesn't seem to happen with react 17.

Example repo: https://github.com/bdew/sqp

[bdew]

The demo in https://github.com/garronej/tss-react/tree/main/src/test/apps/ssr has the same problem (if i update its dependencies so it runs on react 18)

[bdew]

Looks like it's already reported in next vercel/next.js#36675 - sorry only found the other bug after submitting this one.

[garronej]

@bdew Thank you very much for pointing this out.

The silly reason why I considered Next SSR fixed is because I updated the dependency on the wrong demo project.

Thanks for digging out the issue on Next's repo!

I have notifier @mui that Next SSR is still broken

Since the problem is not directly related to tss-react but to Next.js + Emotion with manual configuration of SSR I will wait for a solution to be found by the main tenant.

Thanks for the detailed report,

Best regards,

[AntonOfTheWoods]

Sorry to butt in on a subject I don't really understand, but is this related to the same problem as mentioned here? (and which jss has probably fixed with this)

[garronej]

Hi @AntonOfTheWoods, thanks for your input,
Yes it has to do with this but I think it's more specifically this.
TSS is a wrapper around @emotion/react and @emotion/react is the style engine used behind the scene by MUI.
I don't think I should attempt to fix it specifically for TSS, I should wait to see how emotion/MUI/Next.js decide to go about the issue.
Currently, MUI provide no working configuration that works with Next.js + React 18.
See this issue (it should be reopened Monday).

As soon as a solution is found you can rest assured that I will update "tss-react/nextJs" if nessesary and/or update the doc.

Thanks for reaching out,

[AntonOfTheWoods]

Thanks @garronej . Actually I am (was!) just using StrictMode with normal React 18 and the latest MUI, not using next or SSR at all. In dev mode with StrictMode lots of stuff is broken, without StrictMode most stuff seems to work ok. There are a few other things that have changed but that might be just related to migrating to tss-react (stuff like "& svg": ... working a little differently in certain circumstances but not all...). I am migrating react-admin to 4, MUI to 5.6 and React to 18, so lots of stuff has little niggles but that is totally expected.

My understanding is that in dev mode they are running something twice, which means several css-in-jss solutions have issues. Is this a different issue, or the same underlying one?

[garronej]

@AntonOfTheWoods,
thanks for reporting.
I am unaware of any issue outside of SSR in Next.js with React 18.
I have tested the test SPA create-react-app with React 18 and <StrictMode /> and everything is working as expected.
If you can come up with a specific reproducible issue, I will happily address it. Ideally, that would be under the form of a testable repo.

[AntonOfTheWoods]

Actually @garronej it looks like I may have made a false accusation there. Adding StrictMode back after fixing a few other things (like nested selectors) has got things working. The nested selectors thing is clearly documented though so I guess I was just getting confused. Thanks for your help on this!

[garronej]

@AntonOfTheWoods Thank you very much for taking the time to give feedback. Much appreciated!

[garronej]

Working with Next.js v12.1.7-canary.4 🥳