-
-
Notifications
You must be signed in to change notification settings - Fork 32k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Material-UI 4 example does not work properly with nextjs getStaticProps revalidate and causes wrong order of head tags #25307
Comments
@oliviertassinari Do you have any idea what could be causing this, or maybe have hints where I could start debugging this? |
@janus-reith No idea. Did you try v5? |
Yep, I couldn't reproduce it there. |
I would honestly imagine an issue inside Next.js. The injection order depends on the JavaScript import resolution order. With v5, you get emotion by default as a style engine that resolves the injection order differently (with props cascading). If you swap the engine to styled-components, you will likely experience the same issue as sc behaves like JSS. |
Thanks, that might be a valuable hint for me, will see if I can reproduce it with SC. |
An update, we have now made enough progress with the new
This was made possible by the awesome work of @mnajdova. |
Current Behavior 😯
When using the
revalidate
property ofgetStaticProps
with nextjs. The first render of the page in production builds would be correct, but subsequent renders of the page will be incorrect, although in many cases this won't be visually notable.When expecting the tags in the DevTools's ,
MuiCssBaseline
would be first, but for subsequent re-renders of that page be appended to the bottom instead. (In the codesandbox example,MuiContainer
would be first then)This however is not limited to
MuiCssBaseline
I made some line by line comparisons on larger codebases and could notice that a lot of things where off. (So I assume forcingMuiCssBaseline
probably is not the soltution)This whole behavior happens right in the server render, and can also be observed with js in the browser disabled.
Expected Behavior 🤔
Both the first and subsequent renders of the static page should produce the same result(as long as static props dont change) with
MuiCssBaseline
on the top.Steps to Reproduce 🕹
I created a quick codesandbox example here: https://codesandbox.io/s/material-ui-revalidate-bug-0joh8?file=/pages/%5Bslug%5D.js
It will create a production build on server startup to showcase the issue properly.
Steps:
MuiCssBaseline
is on topMuiCssBaseline
at the bottom.Context 🔦
While this doesn't produce any visible errors in the sandbox above, this can lead to quite some unexpected behavior on production sites.
Chances are that neither nextjs nor material-ui cause a bug here, but maybe that revalidate is feature that would make it necessary to use material-ui in a different way than originally showcased in the example.
Your Environment 🌎
`npx @material-ui/envinfo`
The text was updated successfully, but these errors were encountered: