v14.2 Css styles are not loaded when navigating to a page with a wrapper component

[milkyfuckinway]

Link to the code that reproduces this issue

https://github.com/milkyfuckinway/nextjs14.2cssbug

To Reproduce

1. Start the application
2. Navigate to the authorization page
3. See that the styles didn't load.
   Video: https://drive.google.com/file/d/1Mm8S2deb_vUF0MReNqz3u3v6eK_Q7g-a/view?usp=drive_link

Current vs. Expected behavior

I expect the styles to load without having to refresh the page every time

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Enterprise
  Available memory (MB): 16244
  Available CPU cores: 12
Binaries:
  Node: 20.11.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.0 // Latest available version is detected (14.2.0).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

Not sure

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

next dev (local)

Additional context

No response

[timneutkens]

Tried to reproduce this multiple times on codesandbox using the repository but can't reproduce it: https://codesandbox.io/p/github/milkyfuckinway/nextjs14.2cssbug

Maybe it's Windows specific, will do some digging

[dackom]

I have the exact same issue on M1 mac. After clicking on any link, page loads without styles, then after refreshing it loads correctly. Same as in this video. Every page uses components and those components are using .module.scss

[sab91]

Hello guys, we have the same issue on our side, it seems to happen only in dev mode.

We use Windows and macOS Sonoma with M1 Pro. WIth the codesandbox you shared @timneutkens I confirm the issue is visible.

Actually, we see this when navigating to the authorization page (form styles are missing):

What we noticed is when you check the source files into the chrome console, the css contained in _next/static/css is missing some styles and when refreshing the page it is added at the end of the file. I attached two files, one is the css at first load and the second is after refreshing the page. I hope it will help to find the issue.

css.zip

[darthmaim]

I also have this issue in my project, both on windows and macOS. I've tried multiple canary versions and found that v14.2.0-canary.28 is the first version with this issue, so the bug was likely introduced by #63157.

I also have this issue on pages that are not using a "wrapper component" as the title of this issue suggests, just the styles from my layout.tsx and none from the page.tsx are loaded when soft navigating between pages in dev mode. Refreshing the page will load all styles correctly.

Once the styles are loaded they will always load until the dev server is restarted.

[christian-tchaikovsky]

I also reproduce the bug when using .modules.scss. MacOS M1. Next.js version - 14.2.1

[darthmaim]

#64488 released in v14.3.0-canary.1 fixes this issue for me.

Based on that PR you can add this to your next.config.js as a workaround, if you don't want to run canary yet:

webpack(config, { dev }) {
  if(dev) {
    config.plugins = config.plugins.filter((plugin) => plugin.constructor.name !== 'CssChunkingPlugin');
  }
  return config;
}

@​maintainers: Since 14.3 is probably still some months off, could you release #64488 is 14.2.2?

Edit: The fix was now published in 14.2.2

[timneutkens]

Since 14.3 is probably still some months off, could you release #64488 is 14.2.2?

We changed the canary naming scheme a while ago, it's no longer the case that commits can only land in the minor version but instead we create a separate branch with fixes for patch releases, so this will be part of the 14.2 patch release cycle 👍

Going to close this issue as #64488 is indeed the fix for this issue 👍

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