Missing CSS styles after upgrading from Next.js 15.2.x to 15.3.x (when Turbopack enabled in dev or build)

[siba19785]

Summary

Hi,

I'm using Next.js to render dynamic pages composed of multiple content modules. All modules are imported and rendered conditionally through a central Modules.js file. Each module imports its own stylesheet, using the BEM naming convention (we are not using CSS Modules).

After upgrading from Next.js 15.2.x to 15.3.x, the styles for the individual modules are no longer applied. Only the global styles imported in layout.js are present.

The issue occurs specifically when the Modules.js file is imported in not-found.js. As soon as Modules.js is imported there, the module-specific styles are missing—even on regular pages.

Interestingly, if I wrap the Modules component in another component inside not-found.js and mark that wrapper with 'use client', then the styles appear again. This suggests the issue might be related to how SCSS file entry points are being handled—possibly something changed in how styles are included during SSR or static rendering.

This behavior did not occur in 15.2.x and seems to be a regression or a change in behavior in 15.3.x.

Has anyone experienced this, or is there any known change related to style handling in 15.3.x?

Thanks!

next\src\app[[...slug]]\page.js

import Modules from '@/modules/Modules'
const Page = async({params}) => {
  return (
    <main>
      <Modules page={data} />
    </main>
  )
}
export default Page

next\src\modules\Modules.js

import PrimaryHero from '@/modules/PrimaryHero/PrimaryHero'
import SecondaryHero from '@/modules/SecondaryHero/SecondaryHero'
and so on ...

next\src\modules\PrimaryHero\PrimaryHero.js

import './PrimaryHero.scss'

next\src\app\not-found.js\not-found.js

import Modules from "@/modules/Modules";
export default async function NotFound() {
  return (
    <main>
      <Modules page={data} />
    </main>
  );
}

Additional information

No response

Example

No response

[cpotey]

Wow! Great find to work out not-found has something to do with it - this explains why a couple components's CSS modules stopped working on other pages.

Have a similar situation in my code - a <Button> component and a CSS grid wrapper that were used inside my /projects/[slug] dynamic route, but not applying any styling with CSS modules.

Like you suggested, saw they were in the not-found.tsx - as soon as I removed them from inside there, they begin working in the dynamic routes again!

This only happens in Turbopack, so clearly the issue lies with that.

Staggered this hasn't been more widely reported? Maybe there's something more niche to the cause beyond the components also being in not-found?

[cpotey]

Interestingly, if I wrap the Modules component in another component inside not-found.js and mark that wrapper with 'use client', then the styles appear again. This suggests the issue might be related to how SCSS file entry points are being handled—possibly something changed in how styles are included during SSR or static rendering.

To add to @siba19785's point here for anyone else running into this.

Putting use client to the top of my not-found.tsx worked too (as long as you don't have any async/awaits in here, this could be another temporary fix).

[zecka]

I am seeing the same class of issue with Turbopack, but for me it seems not related to not-found.

Setup

• Next.js: 15.5.2 (btw same issue on 15.4.7)
• Turbopack: enabled
• Styling: vanilla-extract using the custom Turbopack loader suggested here: Cannot build a next app with Turbopack (Styles were unable to be assigned to a file) vanilla-extract-css/vanilla-extract#1367 (comment)
• Node: 22.15.0

Symptom

• Styles generated by vanilla-extract are missing when components are Server Components.
• If I add "use client" at the top of the affected component, the styles appear again. This is only a workaround and not acceptable in my case, but it shows the problem is on the SSR path.
• This happens without any not-found usage.