Unstyled UI shows up on the first load. CSS is not loading properly in production build.

[mplakhtiy]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Unstyled UI shows up on the first load when using material ui examples nextjs-with-typescript or nextjs stackblitz

This also happens within my own project with the latest packages versions.

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Unstyled UI shows up on the first load. CSS is not loading properly in production build.

Expected Behavior

Ui is loaded with styles on the first load.

To Reproduce

1. Go to https://stackblitz.com/github/mui/material-ui/tree/master/examples/nextjs or https://stackblitz.com/github/mui/material-ui/tree/master/examples/nextjs-with-typescript
2. Reload the ui within stackblitz (it can be seen that mui light bulb icon is large for a fraction of a second)

[balazsorban44]

This should probably be reported in https://github.com/mui/material-ui first. If they agree that this is a Next.js bug, we can have a further look. 👍

[balazsorban44]

UPDATE: I found you opened this already, and there was this response: mui/material-ui#32770 (comment)

I tested with our canary release, and it was indeed fixed already.

https://github.com/vercel/next.js/releases/tag/v12.1.7-canary.4 and up should work correctly.

Related PR: #36792

And related issue already reporting this: #36675 (comment)

[mplakhtiy]

Thanks @balazsorban44 for the quick response!

[vascojm82]

UPDATE: I found you opened this already, and there was this response: mui/material-ui#32770 (comment)

I tested with our canary release, and it was indeed fixed already.

https://github.com/vercel/next.js/releases/tag/v12.1.7-canary.4 and up should work correctly.

Related PR: #36792

And related issue already reporting this: #36675 (comment)

Hi, I upgraded NextJS from v12.0.10 to v12.1.7-canary.39 and I'm still seeing this issue, the style from the theme won't load on the page's first render, anyone can help?

[7iomka]

@balazsorban44 , @vascojm82
Same issue
I use this package for condition responsive solution with ssr support (React 17 only)

in the issues of this package either read they say the problem is next
referring to the issue #36675
they say fixed in [email protected]
It is true.

Now, decided to upgrade to the latest canary
and again I see the same problem

In my case problem with related package is there
(https://github.com/artsy/fresnel/blob/1f6b3618a314d8551daa992b653a4fb25c28ac73/src/Media.tsx#L372)
in production matches is null on server-render

Can someone help create an issue - I don't even understand what to write?

@huozhi, @fmmoret, @ijjk, @davidbarker, @kwonoj, @seanparmelee, @timneutkens

[balazsorban44]

@7iomka please refrain from mentioning Next.js team members who haven't been part of the discussion.

You can create a new issue with a full reproduction, following the steps described in the bug report template, and see how we triage issues here.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.