Turbopack output path issue with ant design css in js
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/6tngmj
To Reproduce
I am now facing an issue with cssinjs while turbopack is enabled. It is fine while turbopack is disabled. And css file can be extracted successfully,
But When I enable turpopack and restart the project, the file output path is not correct. And that css file is empty. Css styles are not extracted at all.
And when I debug _document.ts file, when it reaches this line:
I got file not found error:
So that cache is empty and can not be extracted, I guess this is the root cause.
Hope someone could provide some help, thanks a lot.
Below is my package.json configuration:
{
"name": "create-next-app-antd",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --port 8080",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"devDependencies": {
"@ant-design/cssinjs": "1.23.0",
"@ant-design/static-style-extract": "1.0.3",
"@reduxjs/toolkit": "2.5.0",
"@tanstack/react-query": "5.64.1",
"@types/node": "22.13.5",
"@types/react": "18.3.18",
"@types/react-dom": "18.3.5",
"@types/react-redux": "7.1.34",
"antd": "5.23.1",
"eslint": "9.21.0",
"eslint-config-next": "15.2.0",
"next": "14.2.24",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-redux": "9.2.0",
"ts-node": "10.9.2",
"tslib": "2.8.1",
"typescript": "5.7.3"
}
}
Current vs. Expected behavior
Current:
Css file is extracted under wrong output path
Expected:
Css file should be extracted here
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Available memory (MB): 32494
Available CPU cores: 12
Binaries:
Node: 22.14.0
npm: 10.9.2
Yarn: 4.7.0
pnpm: N/A
Relevant Packages:
next: 14.2.24 // An outdated version detected (latest is 15.2.4), upgrade is highly recommended!
eslint-config-next: 15.2.0
react: 18.3.1
react-dom: 18.3.1
typescript: 5.7.3
Next.js Config:
output: N/A
⚠ An outdated version detected (latest is 15.2.4), upgrade is highly recommended!
Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
Read more - https://nextjs.org/docs/messages/opening-an-issue
Which area(s) are affected? (Select all that apply)
CSS
Which stage(s) are affected? (Select all that apply)
next build (local)
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue from the linked CodeSandbox with Turbopack enabled, using the listed package versions and the next build stage. Inspect _document.ts, the generated CSS output path, and the cache when extraction runs. Done means the CSS is extracted to the expected path, is non-empty, and the file lookup succeeds.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nextjs, react, typescript
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100