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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[examples] Next.js example rendering issues #32644

Closed
2 tasks done
EugeneDraitsev opened this issue May 5, 2022 · 9 comments
Closed
2 tasks done

[examples] Next.js example rendering issues #32644

EugeneDraitsev opened this issue May 5, 2022 · 9 comments
Assignees
Labels
duplicate This issue or pull request already exists

Comments

@EugeneDraitsev
Copy link

EugeneDraitsev commented May 5, 2022

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

Hi,

If you will try to use official Next.js (TypeScript version) example and refresh a page you will see that something is wrong with styles (maybe rehydration error):

Screen.Recording.2022-05-05.at.21.17.36.mov

The same behavior exists locally and even on production build of this example

Expected behavior 🤔

Styles looks fine when you refresh page

Steps to reproduce 🕹

Steps:

  1. Go to https://stackblitz.com/github/mui/material-ui/tree/master/examples/nextjs-with-typescript
  2. Wait until in download dependencies
  3. Refresh the page and see the broken styles

Context 🔦

However if you will use react 17 instead of 18, then example works fine

Your environment 🌎

`npx @mui/envinfo`
    @emotion/react: latest => 11.9.0 
    @emotion/styled: latest => 11.8.1 
    @mui/base:  5.0.0-alpha.79 
    @mui/icons-material: latest => 5.6.2 
    @mui/material: latest => 5.6.4 
    @mui/private-theming:  5.6.2 
    @mui/styled-engine:  5.6.1 
    @mui/system:  5.6.4
    @mui/types:  7.1.3
    @mui/utils:  5.6.1
    @types/react: latest => 18.0.8
    react: latest => 18.1.0
    react-dom: latest => 18.1.0
    typescript: latest => 4.6.4
@EugeneDraitsev EugeneDraitsev added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label May 5, 2022
@gurkerl83
Copy link

gurkerl83 commented May 5, 2022

A ticket was opened in the NextJs repo with the same problem. It seems NextJs related due to the version segments where you can observe the problem from happening and those which are not affected; NextJs 12.1.5 works perfectly fine even with React 18 in place; 12.1.6, on the other hand, shows the distortion.

vercel/next.js#36675

Update:
The last working NextJs version was 12.1.6-canary.5. In canary 6 the distortion is there.

Thx!

@MathiasKandelborg
Copy link
Contributor

You can remove the cache component from the _app file, and the FOUC will disappear. I'm still trying to get to the bottom of this weird issue.

@danilo-leal danilo-leal changed the title Mui + NextJs example rendering issues [examples] Next.js example rendering issues May 10, 2022
@danilo-leal danilo-leal added the examples Relating to /examples label May 10, 2022
@aligajani
Copy link

You can remove the cache component from the _app file, and the FOUC will disappear. I'm still trying to get to the bottom of this weird issue.

Yes this fixed it but what is the purpose of that Cache component?

@gurkerl83
Copy link

gurkerl83 commented May 11, 2022

The problem is fixed in NextJs 12.1.7-canary.4 which was also released to NPM. For reference see vercel/next.js#36792

@MathiasKandelborg
Copy link
Contributor

MathiasKandelborg commented May 11, 2022

@aligajani that's still a good question to me. At this point I consider suggesting not to use it because the more I think and read about this; the more I come to the conclusion that CSS is already provided in the server code, and a cache isn't needed on the client-side.

But I've been looking from a non-SSR point of view up until this point. I'm going to test with and without the component, in the various ways nextjs (especially) renders, and see what results I come up with.

I've limited time though, so investigations are not going super quick.


I've tested the new canary version without the cache components, in all the apps I have with next/mui, and it still works perfectly.

@aligajani
Copy link

@MathiasKandelborg Thanks for your reply. I just updated to canary.7 and they patched it.

@siriwatknp
Copy link
Member

Seems like it is the same issue as #30410 (comment).

I can confirm that the issue existed in next 12.1.6. The workaround is to upgrade next to canary.

@siriwatknp
Copy link
Member

I am closing this issue then.

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

Duplicate of #30410

@oliviertassinari oliviertassinari marked this as a duplicate of #30410 May 30, 2022
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

7 participants