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

[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

[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

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

[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

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

[Christopher-md]

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

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