mui-treasury
mui-treasury copied to clipboard
siriwatknp
[Layout] NextJS className mismatch errors
Hello @siriwatknp,
Great job with v4! I love the direction you've taken with the package. I've been using v4 for about a week now on a new NextJS project I'm working on and have been encountering className mismatch errors. If you're unfamiliar this basically means that NextJS is detecting the className prop is not identical on first render on the client as it was on the server.
Since this was my first NextJS project I had to make sure I wasn't messing something up, but finally I've made a demo that unfortunately demonstrates the issue stemming from mui-treasury: [https://codesandbox.io/s/classname-mismatch-pzg9s] In the sandbox, you can see I followed instructions to modify _app and _document, and even attempted a .babelrc fix that I found on NextJS's repo.
If you toggle the useTreasury boolean in the sandbox, the sandbox will go from using the package layout components to some arbitrary styled-components. The error I'm talking about will appear only when true, and I would recommend opening the browser window in a new tab and using the native console (sometimes the sandbox console stays stale).
I've taken a look at the source but am currently stumped at what can be done to fix it; however, let me know there's anything I can help with.
@venegasalejandro Do you think this issue is caused by mui-treasury/layout or it is about setting Material-UI with NextJS?
One more thing, is the mismatch impact any part of your application or it is just warning?
@siriwatknp I don't think it is related to Material-UI since it is being used when you set the toggle to false in the sandbox. I'm thinking it might be related to breakpoint detection and changing of classnames depending on breakpoints in JS rather than constructing a classname that includes the breakpoints in CSS, but that's just off the top of my head without going into the source code.
I think it leans towards being more of a warning/hint that NextJS provides in order to track down inconsistency if they occur, thankfully I think there are no inconsistencies occurring as of now.
In fact, this issue seems to exist and affects @mui-treasury/{components,styles}@2.0.0-alpha.1 with material-ui/{core,styles}@5.0.0-beta.1 as well. It seems like there is a problem with Material-UI SSR stylesheets (which, in case of Next.js, have to be manually rendered into the DOM during SSR) not containing proper classnames, which differ in the numeric suffix between server-side and client-side renders (the latter are incremented, following values).
What's interesting, that same code copied to implementation files' makeStyles style definitions work properly with SSR.
At a quick glance, it also seems that pretty much all other hooks utilizing createStyles are affected.
I have the same problem. Temporary solved wrapping the layout with NoSsr (disable server-side rendering at all!!!!) for development purposes but this is not acceptable in production.
Another solution will be to remove this code from your _app.js component. You'll end up having a lot of unused css in the page and the class mismatch error will not disappear but at least the UI looks like it doesn't break
Well, disabling SSR or SSR styles is not a solution at all. I think this issue needs some more investigation.
@siriwatknp do you have any hints on this? why the backend render something different than the client? Could it be some settings related to responsive design? What else can be?