Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Server side rendering with nextjs styles issue with JSS

See original GitHub issue

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

After opening my NextJS app with yarn dev I get the following error Even after following exactly the example here https://github.com/mui-org/material-ui/tree/next/examples/nextjs-with-typescript. I still get the error

Expected Behavior 🤔

I should not get the error after doing the server side rendered css removal and so on explained here https://github.com/mui-org/material-ui/tree/next/examples/nextjs-with-typescript

Steps to Reproduce 🕹

Couldn’t get the codesandbox.io to work with my app so I am giving a github repo instead. Hope it’s not a problem. Steps:

Go to https://github.com/dimitur2204/ticketbrite
Clone the repository with git clone
cd into the client folder
run yarn dev
Navigate to http://localhost:3000/signup
Open the console and you will see the error

Context 🔦

I was trying to do a SSR app with NextJS when I stumbled upon the issue. Then I saw that I need to do that thing with the ServerStyleSheets. But still wasn’t able to resolve the problem after following the example.

Your Environment 🌎

System: OS: Windows 10 10.0.19041 Binaries: Node: 16.3.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD npm: 7.15.1 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 91.0.4472.101 Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.54) npmPackages: next: 11.0.0 @material-ui/core: ^4.11.4 => 4.11.4 @material-ui/styles: 4.11.4 @material-ui/system: 4.11.3 @material-ui/types: 5.1.0 @material-ui/utils: 4.11.2 @types/react: 17.0.11 => 17.0.11 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 typescript: 4.3.4 => 4.3.4

Browser: Google Chrome Version 91.0.4472.106 (Official Build) (64-bit)

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

Issue Analytics

State:
Created 2 years ago
Reactions:17
Comments:28 (8 by maintainers)

Top GitHub Comments

7reactions

kwakky1commented, Jun 26, 2021

i also got same problem. after update Next Js version 11 , Box component show this error message

6reactions

antitimcommented, Jul 15, 2021

Try removing reactStrictMode: true from next.config.js or set strict: false in tsconfig etc In my case, this solved the problem

Top Results From Across the Web

Next.js is not rendering CSS in Server Side Rendering

I noticed that imported .css styles are being rendered properly in Client Side Render but not on Server Side Render. According to Next.js...

Implementing React-JSS on Next.js Projects. | by Dipesh K.C.

Styling works fine if we simply navigate between pages i.e during client-side-rendering. This problem only arises if we reload our page manually.

Server-side rendered styled-components with Nextjs

I've recently worked on setting up Next.js with styled-components, ... To enable server side rendering of the styles, we will need to do...

Server side rendering Styled-Components with NextJS - Medium

Styled-components supports concurrent SSR (server side rendering) with stylesheet rehydration. The basic idea is that when your app renders on ...

SSR with Next.js, styled-components and Material UI

styled-components support server-side rendering with stylesheet rehydration which allows you to use styled-components with React DOM's every time you render an ...