FOUC (Flash of Unstyled Content) when using dynamic imports and CSS Modules

[joshwcomeau]

Link to the code that reproduces this issue

• https://codesandbox.io/p/devbox/github/joshwcomeau/next-13-css-modules-dynamic-import-bug/tree/main/
• https://github.com/joshwcomeau/next-13-css-modules-dynamic-import-bug

To Reproduce

1. Refresh the page
2. Notice that the text appears unstyled for a brief moment, before the following CSS is applied: font-size: 2rem; color: red
3. If you disable JavaScript, the text will remain unstyled, demonstrating that the CSS is only loaded after hydration.

Current vs. Expected behavior

When using next/dynamic, I expect that any CSS Modules imported in the lazy-loaded component will be applied to the server-generated HTML. Otherwise, we wind up with this FOUC:

Note that this bug only occurs within the App Router. It works as-expected inside the Pages router.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:27:24 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.21
  pnpm: 8.14.1
Relevant Packages:
  next: 14.2.0-canary.4 // Latest available version is detected (14.2.0-canary.4).
  eslint-config-next: 14.1.2
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router, Dynamic imports (next/dynamic)

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed), Other (Deployed)

Additional context

• I tested this in next@canary (14.2.0-canary.4), as well as 14.1 and 13.5.7. The behaviour is the same across all 3.
• For a brief moment, I thought that the issue could be solved by removing the "use client" directive from the file that does the importing. This does indeed solve the FOUC, but it also breaks lazy-loading, causing HeavyComponent to be included in the main JS bundle instead of being spun off into its own bundle.
  • The need for "use client" is documented in React lazy or next dynamic don't reduce an app route's "First Load JS" #49454.
• This is similar to the issue reported in [v13] css modules not carried with dynamic imports #44994.

I'm really hoping that this can get looked at 🙏 it's a pretty big blocker for building real-world apps with CSS Modules, or any of the tools that compile to CSS Modules.

[djavco]

I'm seeing something similar with my Sass set up.

I'm importing a global scss file in the root layout.tsx and prepended CSS variable files in sassOptions, I'm using .scss modules in all my components - I've tried everything to eliminate FOUC between pages. It seems the component .scss is not being loaded before the component.

If I set export const dynamic = 'force-dynamic'; it loads correctly without FOUC but obviously with the loading animation I've added in layout.tsx

[KirillEvtushenko]

Same issue. It blocks our migration to the App router.

[el-ethan]

I am having the same issue as well. I am trying to use an EuiPopover component from @elastic/eui in my app. EUI doesn't fully support SSR, and this component raises an error during pre-rendering on the server, so I tried to use a dynamic import to resolve the issue. It did resolve the SSR error, but now I get the FOUC. I also get the FOUC when I have tried other solutions to force the component to only render on the client side like this solution from Next.js docs.

It's very frustrating because the SSR issue does not affect the user, but causes the next build to fail. On the other hand, the dynamic import or other solutions to bypass SSR fix the problem on the server side, but create a worse experience for the user due to the FOUC.

I am also using the App Router.

[joshwcomeau]

Thanks for working on this, @huozhi! ❤️

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.