material-ui: [examples] SSR on the Next.js official example not working
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
Cloning the official next.js ssr example is not doing ssr at all:
Disabling javascript in the browser shows a raw html page (with almost no css except those for fonts)
Expected behavior 🤔
Expected to see the page styled
Steps to reproduce 🕹
Steps:
1.curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/nextjs 2.cd nextjs 3.yarn install 4.yarn dev 5.disabled javascript in browser 6.load localhost:3000
Context 🔦
This is related to me migrating my project from v4 to v5. Here’s the StackOverflow question related to this bug
Your environment 🌎
`npx @mui/envinfo`
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
System:
OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa)
Binaries:
Node: 16.14.2 - /usr/bin/node
Yarn: 1.22.18 - /usr/bin/yarn
npm: 8.5.0 - /usr/bin/npm
Browsers:
Chrome: 99.0.4844.74
Firefox: 98.0.2
npmPackages:
@emotion/react: latest => 11.8.2
@emotion/styled: latest => 11.8.1
@mui/base: 5.0.0-alpha.74
@mui/icons-material: latest => 5.5.1
@mui/material: latest => 5.5.3
@mui/private-theming: 5.5.3
@mui/styled-engine: 5.5.2
@mui/system: 5.5.3
@mui/types: 7.1.3
@mui/utils: 5.5.3
@types/react: 17.0.43
react: latest => 18.0.0
react-dom: latest => 18.0.0
I’m using chrome
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 1
- Comments: 34 (16 by maintainers)
Offtopic:
@garronej good that you updated your comment, next time think twice how you write a message.
Thanks for the hint.
The created issue was closed by this PR so I assume that this should get fixed with the next Next release.
@ziedHamdi apparently something is not playing nice with React 18 here (React 18 was released literally 1 day ago)
You can resolve this issue by downgrading to React 17 in your package.json:
@ziedHamdi it’s super hard to tell what might be wrong based on just a code. Ideally you should provide a minimal runnable repro case of the problem and share that with maintainers so they could take a look at this.
Complete the v5 migration with tss-react, it worked for me. https://mui.com/material-ui/migration/migrating-from-jss/#2-use-tss-react https://docs.tss-react.dev/ssr/next.js#mui-and-tss-use-different-caches
@garronej has prepared a good repro case and based on it I’ve created an issue in Next.js project to clarify how this is supposed to be set up: https://github.com/vercel/next.js/issues/36268
OK, so in your repo, you have both CacheProvider and StyledEngineProvider. You need only CacheProvider and that will resolve the issue
Ok I’ll try to do that and file another issue with the repo
You could try bisecting your codebase - remove stuff in huge chunks and observe if the issue is still reproducible. This usually helps narrow cases like this relatively quickly.
Hooray it works with Next 12.1.7-canary.4 🥳
Please prepare a full runnable repro case so I could jump into investigating this
I confirm that react 18 break SSR for us.
Still investigating.