[Turbopack | CSS]: CSS prioritization differs between next dev --turbopack and next build --turbopack
Link to the code that reproduces this issue
https://github.com/GlebKodrik/turbopack-style/
To Reproduce
Use route my project with problem : http://localhost:3000/intensive/31BoMCUUsroffEMtAmd6ALUmZ0y or https://turbopack-style.vercel.app/intensive/31BoMCUUsroffEMtAmd6ALUmZ0y
To Reproduce
-
Run the app in development with next dev --turbopack → Styles load correctly, no issues observed.
-
Build the app with next build --turbopack and then start with next start → Styles are applied in a different priority/order compared to dev mode.
Notes:
- The issue reproduces 100% on our current setup.
- Sometimes deleting the pages folder or a random component in entities makes the bug disappear, which makes the behavior unpredictable.
Current vs. Expected behavior
Current vs. Expected behavior
- Current: In production (next build --turbopack + next start), CSS order/priority differs from development, breaking the layout.
- Expected: Style prioritization should be consistent between dev and build modes when using Turbopack.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.6.0
Binaries:
Node: 20.9.0
npm: 10.8.2
Relevant Packages:
next: 15.6.0-canary.12
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 build (local)
Additional context
Additional context Happens locally with next build --turbopack → next start. Cannot reproduce when running next dev --turbopack. Issue sometimes disappears after removing a random folder/component, which suggests non-deterministic style bundling.
1 image - next dev --turbopack 2 image next build --turbopack → next start
I can reproduce it, but we need a more minimal reproduction. I tried to trim it down by removing imports and reexports while still maintaining the broken prod behehavior, but there's still to much...
@mischnic
I can reproduce it, but we need a more minimal reproduction. I tried to trim it down by removing imports and reexports while still maintaining the broken prod behehavior, but there's still to much...
I’ve minimized the code a lot, so now it’s much easier to understand what’s going on. Please pay special attention to the page.
Reproduction link: http://localhost:3000/intensive
We are working with (pages).
- If I delete the course page, the bug occurs.
- If I move the
<CourseProgramStudy />block into the parent (page), the bug occurs. - Same thing with the intensive (page).
- If I delete
<WhoItSuitableFor />, the bug occurs. - If I move the content of
<WhoItSuitableFor />directly into page, the bug also occurs.
Additional
- If I delete a component that is not used anywhere at all (
<CourseProgramLessonCard />), the bug still occurs
Something very strange is happening here.
@mischnic Any information?
@mischnic In the new version, the next tank remains
We will look into it further soon.
@mischnic I'm really looking forward to it. There's just a really important bug that's preventing us from moving. We're just waiting for it.
We will look into it further soon.
@mischnic Hey, any progress? I really need it.
We're also having this issue and its blocking us from using turbopack in production. I expect that when I use the same bundler in dev and build the app should look identical in dev and build
@mischnic How are things going there?
@mischnic @icyJoseph You have a problem on the board.?
@mischnic How are things going there?
@GlebKodrik I don't think they will respond 🫠
@GlebKodrik I don't think they will respond 🫠
I absolutely adore the Nextjs team. They should focus on stabilization instead of new features. It's always one problem after another. And the guys ignore it.
I am also seeing this. The more time goes on the more places I'm noticing it. I'm using turbo pack on next 16.0.10 if that's helpful
I suggest creating new ones issues so they can see the problem and start fixing it.
@camiblanch @MattisAbrahamsson