Next.js: FOUC using both global CSS and CSS modules

[tomdohnal]

Bug report

Describe the bug

When I use both global CSS and CSS modules and I import some JS libraries, there is a flash of unstyled content when I view the page in the dev mode.

The FOUC disappears when I don't import the CSS module file OR when I don't import any JS libraries...

It is only happening in the dev mode which makes it not a huge concern but it is still a bit stressful 😄

To Reproduce

Complete reproduction on https://github.com/tomdohnal/nextjs-fouc

1. Go to http://localhost:3333
2. You can see the FOUC

You have to either do a hard refresh or open the page in a tab to experience the FOUC.

Expected behavior

There should be no FOUC.

System information

• OS: macOS, Linux (not tested on Windows)
• Browser: Chrome, Firefox (not tested on other ones)
• Version of Next.js: 9.3.1

[tafelito]

Probably related to #12448 and #10268

[webdeb]

Also related
https://github.com/vercel/next.js/issues/13058

[webdeb]

Never heard of the Acronym "FOUC" before :)

[Timer]

This should be fixed in next@^9.4.5-canary.15! Please upgrade and let us know.

[tomdohnal]

Works like charm!