Skip to content
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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
2 tasks done
mplakhtiy opened this issue May 14, 2022 · 7 comments
Closed
2 tasks done
Assignees
Labels
duplicate This issue or pull request already exists

Comments

@mplakhtiy
Copy link

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 馃槸

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.

Expected behavior 馃

Ui is loaded with styles on the first load.

Steps to reproduce 馃暪

Steps:

  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)

Context 馃敠

No response

Your environment 馃寧

`npx @mui/envinfo`
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
@mplakhtiy mplakhtiy added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 14, 2022
@mplakhtiy mplakhtiy changed the title Unstyled UI shows up on the first load Unstyled UI shows up on the first load. CSS is not loading properly on production build May 14, 2022
@PupoSDC
Copy link
Contributor

PupoSDC commented May 14, 2022

Can confirm this is indeed not working 馃槩
Best way to see this is to disable JS and see that the rendered page is unstyled.

@PupoSDC
Copy link
Contributor

PupoSDC commented May 15, 2022

I tried to go a bit deeper on this and the only thing I found out is that initialProps.html seems to be empty.

  const initialProps = await Document.getInitialProps(ctx);
  const emotionStyles = extractCriticalToChunks(initialProps.html);

This is caused by React 18. With React 17 initialProps.html is properly defined.

I will open a ticket with next js.

@PupoSDC
Copy link
Contributor

PupoSDC commented May 15, 2022

Turns out opening an issue won't be needed. This is indeed an issue with next.

It's fixed on Next version 12.1.7-canary.6.

@balazsorban44
Copy link
Contributor

balazsorban44 commented May 15, 2022

This can be closed. See vercel/next.js#36915 (comment)

Related PR: vercel/next.js#36792

And related issue already reporting this: vercel/next.js#36675 (comment)

@mplakhtiy
Copy link
Author

@PupoSDC @balazsorban44 Thanks a lot for the quick response! Can confirm it works with the next@12.1.7-canary.6.

@siriwatknp siriwatknp added external dependency Blocked by external dependency, we can鈥檛 do anything about it duplicate This issue or pull request already exists and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels May 30, 2022
@siriwatknp
Copy link
Member

siriwatknp commented May 30, 2022

Duplicate of #30410

@siriwatknp siriwatknp marked this as a duplicate of #32644 May 30, 2022
@oliviertassinari oliviertassinari removed the external dependency Blocked by external dependency, we can鈥檛 do anything about it label May 30, 2022
@siriwatknp siriwatknp marked this as a duplicate of #30410 May 30, 2022
@oliviertassinari oliviertassinari marked this as not a duplicate of #32644 May 30, 2022
@vascojm82
Copy link

Turns out opening an issue won't be needed. This is indeed an issue with next.

It's fixed on Next version 12.1.7-canary.6.

I upgraded from v12.0.10 to v12.1.7-canary.39 and I still have this issue happening, anybody can help?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

6 participants