Skip to content

Missing css styles when using turbopack (dev + build) after upgrading from 15.2.x to 15.3.x #79535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
siba19785 opened this issue May 23, 2025 · 1 comment
Labels
Turbopack Related to Turbopack with Next.js.

Comments

@siba19785
Copy link

Link to the code that reproduces this issue

https://gitlab.com/sibadev/next-css-bug

To Reproduce

  1. Start the application in development (npm run dev)
  2. Follow the link Go to 404 (not-found.js)

The headline appears black on the home page, but red on the not found page, even though the same component is used in both.

Current vs. Expected behavior

I'm encountering an issue where styles from a shared component are not applied consistently depending on where it's used.

I have a simple component with the following structure:

.Component {
  h1 {
    color: red;
  }
}
import React from 'react'
import './Component.scss'
import Link from 'next/link'
const Component = ({headline, showLink = false}) => {
  return (
    <div className="Component">
      <h1>{headline}</h1>
      {showLink && <><br /><Link href='/not-found'>Go to 404 (not-found.js)</Link></>}
    </div>
  )
}
export default Component

I import this component in both page.js and not-found.js. The h1 should always be styled red, but it only appears red on the 404 (not-found.js) page.

Interestingly, if I either:

  • add 'use client' to not-found.js, or
  • remove the import of the component from not-found.js,
  • …the red color appears correctly on page.js again.

It seems like something about how styles are handled between client/server components or in special files like not-found.js is causing this inconsistency.

Any idea what might be causing this or how to resolve it?

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32401
  Available CPU cores: 20
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.3.2 // Latest available version is detected (15.3.2).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: N/A
Next.js Config:
  output: N/A

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

Turbopack

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

next dev (local)

Additional context

No response

@github-actions github-actions bot added the Turbopack Related to Turbopack with Next.js. label May 23, 2025
@mcmxcdev
Copy link

Also encountering a situation where CSS Modules styles are not applied.

It happens for a page that is RSC, but doesn't happen when adding "use client" to the top. Downgrading to 15.2.5 fixes it, still an issue with 15.4.0-canary.56

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Turbopack Related to Turbopack with Next.js.
Projects
None yet
Development

No branches or pull requests

2 participants