Duplication of CSS rules #42082
Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: #58-Ubuntu SMP Thu Oct 13 08:03:55 UTC 2022
Binaries:
Node: 16.17.0
npm: 8.15.0
Yarn: 1.22.19
pnpm: 7.13.0
Relevant packages:
next: 14.2.0-canary.21
eslint-config-next: 14.1.3
react: 18.2.0
react-dom: 18.2.0
What browser are you using? (if relevant)
Chrome 106.0.5249.119
How are you deploying your application? (if relevant)
Vercel
Describe the Bug
Page has different styling depending on HOW we get to the page.
When we go to the page from other page - we get one style.
When we refresh page we have different color.
The only difference is "Does link to the /lazy page was rendered before rendering /to page or not"
When link to /lazy page is not rendered before. /to page has appropriate styles with red background.
When link to /lazy page is rendered before. /to page will have inappropriate styles.
Expected Behavior
/to page should have exact same styles regardless of how we go to this page
Link to reproduction
https://github.com/whiteand/next-js-css-order-bug
Update October 18, 2025. Use the commit "91bc8405071f9386eb45b6f68a7b785010af5ddf" to reproduce the issue.
To Reproduce
Steps to reproduce:
- Go to https://next-js-css-order-bug.vercel.app/from
- Click on "Page without link to Lazy"
- You will be redirected to the "/to" page
- There you will see "Red background" text on the white background
- Refresh page
- You see the same page but background become Red.
I expect that regardless of the ways we go to the /to page background will be red.
Update October 18, 2025.
I've rewrote reproduction code to use App Router and the next@16.0.0-canary.11 with react@19.2 and I fail to reproduce buggy behavior. So it is possible that in this version the problem is fixed. Maybe turbopack does not have the problem described here.