FOUC in with-emotion-swc

mareksuscak commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 21:00:41 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T8103
    Binaries:
      Node: 18.15.0
      npm: 9.6.2
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.3.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which example does this report relate to?

with-emotion-swc

What browser are you using? (if relevant)

Chrome 112.0.5615.49

How are you deploying your application? (if relevant)

next build && next start

Describe the Bug

The use of Emotion's CacheProvider in with-emotion-swc seems to be causing a flash of unstyled content (FOUC).

For what it's worth, someone else has reported this issue directly on the emotion repository in February and my hypothesis is that they've based their app on this example before too, and that the cache provider doesn't work as expected with the latest version of the compiler toolchain. There's a chance we can keep using the cache provider and just need to update some options to make it work again. Someone with an understanding of what the emotion SWC plugin does should take a look at this.

I wasn't able to reproduce this issue in a production build of the example, only the dev build but in our app, this is noticeable in both dev and production with a lot of styles. See the issue for yourself:

https://user-images.githubusercontent.com/613647/232622568-e95dbb82-21a1-48e6-acae-44640223a327.mp4

Expected Behavior

The example code out of the box should not be causing the FOUC.

To Reproduce

Create a new app based on this example:

yarn create next-app --example with-emotion-swc with-emotion-swc-app

cd into the new app directory

cd with-emotion-swc-app

update dependencies

yarn upgrade -L

and run the app

yarn dev

Now refresh the app a number of times and notice the FOUC

torressam333 commented 2 months ago

I have this issue now @mareksuscak.

Any fix?

mareksuscak commented 2 months ago

I have this issue now @mareksuscak.

Any fix?

See my notes here: https://github.com/emotion-js/emotion/issues/3002#issuecomment-1512104067

It's been a long while and I don't remember what exactly we did but I think removing the cache provider or something like that helped us.

vercel / next.js