duplicated mui styles in SSR

[bdew]

I'm running into a weird issue on a site using next.js with MUI 5 with tss-react.
Somehow all MUI styles end up duplicated in the initial server render of the page. If I disable JS and look at one of the elements I see something like this

Note how it shows .mui-171h0ym then .tss-a983qb-title then .mui-171h0ym again (which ends up overriding my custom style)

When the page hydrates it fixes it so the problem is only visible for a moment (or if you disable JS)

You can see the site at https://sqp.bdew.net/ and the code for it here https://github.com/bdew/sqp

[garronej]

Hi @bdew,

I will have a look at it.
In the meantime, have you tried https://github.com/garronej/tss-react/tree/main/src/test/apps/ssr ?

You can run the project with:

git clone https://github.com/garronej/tss-react
cd tss-react
yarn
yarn build
yarn start_ssr

It would be great if you could tell me if you witness the issues you are describing.

[garronej]

At fist sight our setup seems ok to me, I have to look in deeper details.

Just, if I may, I think you can remove this file and use
the import { makeStyles } from "tss-react/mui" since you are using the default theme.

Or if you want to keep makeStyles.ts use import { useTheme } from "@mui/material/styles"; instead of useTheme: ()=> theme.
You may end up with mismatching theme object between the one you provide with the and the one TSS uses.

[garronej]

Can you test if you experience the same issue with React 18 🙏🏻

[bdew]

Thanks for the hint about makeStyles - i didn't see that there's a default version for it.

I'm already using React 18... I think? At least that's what my package.json says

[garronej]

Yes but can you downgrade to react 17 and see if it works.

Maybe I need to work on the React 18 compat.

[bdew]

I tried with React 17 and I don't see the issue there, so it seems to be only with 18

And by the way your start_ssr doesn't work on windows

PS G:\jsstuff\tss-react> yarn start_ssr      
yarn run v1.22.18
$ yarn yarn_link && cd src/test/apps/ssr && yarn dev
$ ts-node src/bin/yarn_link.ts
'rm' is not recognized as an internal or external command, operable program or batch file.

[bdew]

Also something interesting I noticed - when running next in developent mode (with react 18) it only happens on the very first render of the page. After that, even with JS disabled it doesn't happen when refreshing the page until you restart the whole process.
In production mode it happens every time.

[garronej]

Okay, thank you for your investigation. It seams there is some work to do to support React 18.

[garronej]

I can reproduce

[garronej]

I opened an issue on the emotion repo: emotion-js/emotion#2725

[garronej]

The issue is not restricted to tss-react. MUI as a hole dosen't supprort SSR in Next.js with react 18.
Résolution is on the way

[garronej]

Hi,
Next 12.1.6 just released.
As anticipated, it solves the issue.
Thanks for reporting!