You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Start the application in development (npm run dev)
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
The text was updated successfully, but these errors were encountered:
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
Link to the code that reproduces this issue
https://gitlab.com/sibadev/next-css-bug
To Reproduce
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:
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:
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
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
The text was updated successfully, but these errors were encountered: