12.1.6 CSS generation regression

[max-degterev]

Verify canary release

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

Provide environment information

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_X86_64
    Binaries:
      Node: 16.14.0
      npm: 8.5.0
      Yarn: 1.22.10
      pnpm: N/A
    Relevant packages:
      next: 12.1.7-canary.1
      react: 18.1.0
      react-dom: 18.1.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I'm seeing a CSS generation regression in my setup starting from 12.1.6 and persisting with current 12.1.7-canary.1.

I'm using React 18 with emotion based UI kit. I see a huge FOUC that gets resolved a moment after load, see dev lighthouse screenshots:

12.1.5

12.1.6+

Any idea if this is an issue with React 18 or how to mitigate? I locked my packages to 12.1.5 for now.

Expected Behavior

No FOUC like in 12.1.5

To Reproduce

1. use React 18
2. use css-in-js library like emotion or ui kit like http://mantine.dev
3. use next version 12.1.6 or later
4. Run lighthouse test or watch content jump around during load

[nghiepdev]

I am also facing the same issue in MUI v5.

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

FOUC in Next v12.1.6
https://codesandbox.io/s/rough-glitter-wv731f

Without FOUC in Next v12.1.5
https://codesandbox.io/s/nameless-shape-uy2v5h

[gurkerl83]

@nghiepit Can you share the actual link to the sandbox which has the issue? From your recording, I see only the link of the app running - https://rnwhn.sse.codesandbox.io which shows the distortion.

The other sandboxes you mentioned seem to work.

[nghiepdev]

@gurkerl83 sorry, I just updated codesanbox.

[gurkerl83]

The problem is real, somehow it works in 12.1.5 but breaks in 12.1.6.

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

Thx!

[ANTARES-KOR]

One suspicious difference between 12.1.5 and 12.1.6 is ( I only tested in MUI v5 examples)

on 12.1.5,
you can see the <style/> tags are inserted inside <body/> tag when disabled javascript on browser ( I think this is some sort of bug, too)

and on 12.1.6
the <style/> tags are not inserted inside <body/> tag.

[MathiasKandelborg]

There's definitely a regression in how styles are applied. I've been trying to go through the commits, but haven't found any contenders. Not that I'm intimate with the codebase or have spent more than 5 minutes going through commit names.

I'm going to look more into this, but I'm pretty certain it has to do with custom document, and how emotion injects styles/how styles are injected.

EDIT:
I'm pretty sure the behavior in question is changed in #36352. There are also references from other issues in both the MUI and Emotion repos.

A temporary fix - if you don't use react 18 features - is to downgrade to react 17. This allows usage of the newest next version without FOUC. I've tested in my own application, and the MUI example so far.

Apparently, there's a bunch of complex stuff going on with streaming in React 18, and the current performance-oriented implementation of streaming in NextJS, is breaking how rendering works with - at least - Emotion under MUI.

Also, it seems the problem is how the cache gets populated during rendering. MUI apparently doesn't support the streaming in React 18.

[MathiasKandelborg]

So, after trying to read changes in the Next code, I thought the new rendering seemed like it would populate the application with logic from custom document on the first render.
So I took the most abstract conclusion:
Now, that we are trying to render everything, without any subsequent renderings; maybe the styles are being applied twice?

The FOUC seems (from my code reviewing) to be caused by logic in custom app - and as such
I tried removing the cache component in _app, and the FOUC stopped completely.

I'm still testing, and have to get home to play around with this some more.
I can, though, confirm that using the latest stable versions of MUI, React, and Next works with MUI/Emotion styling, without any FOUC, in my app; I simply removed the cache component in my custom app

[huozhi]

It should be fixed in [email protected], I tested it works for the reproduction. could y'all try it to see if resolves your issue?

[selvamk-js]

It should be fixed in [email protected], I tested it works for the reproduction. could y'all try it to see if resolves your issue?

I still have this distortion issue even after upgrading it to [email protected].

[huozhi]

@srk-sharingan Could you file a new issue with your reproduction? Thanks

[zhulduz]

Version 12.1.7-canary.4 works properly for me

[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.