search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.36k stars 27.02k forks source link

12.1.6 CSS generation regression #36675

Closed max-degterev closed 2 years ago

max-degterev commented 2 years ago

Verify 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

Screen Shot 2022-05-04 at 2 38 08 PM

12.1.6+

Screen Shot 2022-05-04 at 2 37 20 PM

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 commented 2 years ago

I am also facing the same issue in MUI v5.

https://user-images.githubusercontent.com/4768095/166811627-9d7571bc-5baf-4716-917e-02f36f3d1c8e.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 commented 2 years ago

@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 commented 2 years ago

@gurkerl83 sorry, I just updated codesanbox.

gurkerl83 commented 2 years ago

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 commented 2 years ago

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