Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
endless9567 opened this issue Mar 26, 2025 · 0 comments
Open

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

endless9567 opened this issue Mar 26, 2025 · 0 comments
Labels
CSS Related to CSS.

Comments

@endless9567
Copy link

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

@github-actions github-actions bot added the CSS Related to CSS. label Mar 26, 2025
@endless9567 endless9567 changed the title Turbo pack output path issue with ant design css in js Turbopack output path issue with ant design css in js Mar 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Related to CSS.
Projects
None yet
Development

No branches or pull requests

1 participant