Skip to content

Turbopack output path issue with ant design css in js #77513

Open
@endless9567

Description

@endless9567

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    CSSRelated to CSS.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions