AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

Turbopack Dev Duplicates Shared CSS Module Chunk After Client Navigation, Breaking Cascade Order

In Next.js dev with Turbopack and Nx externalDir, a shared component's CSS module is emitted as a standalone chunk. On client navigation to a route that reuses the component, Turbopack appends a second copy of the stylesheet to <head> and does not remove it on Back, causing the later duplicate to override equal-specificity styles and break cascade order.

highConfidence 72%Next.jsAffected V16.2.3Affected V16.2.9Affected V16.3.0-Canary.58

Origin Analysis

Turbopack's development client runtime does not deduplicate stylesheet link tags by href when the same CSS chunk is loaded by multiple route chunks. On navigation back, the previously appended duplicate link remains and appears after the original chunk that contains the user's override, so the duplicate's later .kindPrimary wins over the earlier .featureButton.
1. Clone https://github.com/ilchenkoArtem/turbopack-css-order-repro 2. npm install && npm run dev (runs nx serve web → next dev --turbopack) 3. Open home page; confirm the 'Show more' button is transparent. 4. Click the button to navigate to /catalog. 5. Press browser Back. 6. Observe the button becomes orange, indicating duplicate CSS chunk placed after original.

Fixing Code Block

Edge Case Audit

Removing duplicate link tags is safe for identical CSS module chunks, but if a stylesheet is intentionally loaded multiple times with different media, crossorigin, or other attributes, this dedupe could drop a needed variant. The fix is dev-only and should be removed once the upstream Turbopack fix lands; if the duplicate appears first in DOM order (unlikely), removing later occurrences would be wrong. For production, rely on the corrected build output; rollback by deleting this component and verifying cascade order.

Ecosystem Topology