vercel / vercel/next.js

Turbopack output path issue with ant design css in js

Open
#77,513 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

CSS
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,

Image

Image
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.

Image
And when I debug _document.ts file, when it reaches this line:

Image
I got file not found error:

Image
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

Image
Expected:
Css file should be extracted here

Image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.