vercel / vercel/next.js

next-rspack unclear css errors

Open
#78,323 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Error Handling Not Found
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://github.com/Git-I985/next-rspack-unclear-css-errors

To Reproduce

next-rspack unclear or not displayed css errors

Sandbox https://codesandbox.io/p/github/Git-I985/next-rspack-unclear-css-errors/main

Deps and versions in package.json

Issue

  • example.scss contains error
  • exec npm run build
  • next start building project
  • u see
➜  workspace git:(main) ✗ npm run build

> nextjs@0.1.0 build /project/workspace
> next build

   ▲ Next.js 15.3.1 (Rspack)

   Creating an optimized production build ...
 ⚠ `next-rspack` is currently experimental. It's not an official Next.js plugin, and is supported by the Rspack team in partnership with Next.js. Help improve Next.js and Rspack by providing feedback at https://github.com/vercel/next.js/discussions/77800
 ⚠ `next-rspack` is currently experimental. It's not an official Next.js plugin, and is supported by the Rspack team in partnership with Next.js. Help improve Next.js and Rspack by providing feedback at https://github.com/vercel/next.js/discussions/77800
 ⚠ `next-rspack` is currently experimental. It's not an official Next.js plugin, and is supported by the Rspack team in partnership with Next.js. Help improve Next.js and Rspack by providing feedback at https://github.com/vercel/next.js/discussions/77800
 ⚠ Compiled with warnings in 1000ms

⚠ Unexpected token Function("var") at static/css/2cefff9d3ed3ad50.css:0:42

 ✓ Compiled successfully in 2000ms
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (5/5)

   ... then i press Ctrl + C
  • You don’t understand where the error is or in which file. You only have a hashed file name, and this file doesn’t appear in the .next folder.
    At the same time, you don’t know its original name in the src folder, so you just don’t understand where the error is located at all. Its hard to work this way when u have 1000+ scss files
  • in dev mode npm run dev u will not see any errors at all, but its not big issue

Expected

Something like Unexpected token Function("var") at src/app/example.scss:3:...

Current vs. Expected behavior

Current: ⚠ Unexpected token Function("var") at static/css/2cefff9d3ed3ad50.css:0:42
i dont now what file it is, where it is, and whats the error
Expected: something like Unexpected token Function("var") at src/app/example.scss:3:...

Provide environment information
Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4242
  Available CPU cores: 2
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 15.3.1 // Latest available version is detected (15.3.1).
  eslint-config-next: 15.2.0
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.2
  next-rspack: 15.3.1
Next.js Config:
  output: N/A
--------------------------------------------------------------------------------
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.4.0: Wed Mar 19 21:17:35 PDT 2025; root:xnu-11417.101.15~1/RELEASE_ARM64_T6041
  Available memory (MB): 49152
  Available CPU cores: 12
Binaries:
  Node: 21.5.0
  npm: 10.5.0
  Yarn: 1.22.21
  pnpm: 9.11.0
Relevant Packages:
  next: 15.3.0 // There is a newer version (15.3.1) available, upgrade recommended! 
  eslint-config-next: 15.3.0
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.3.3
Next.js Config:
  output: standalone
Which area(s) are affected? (Select all that apply)

Not Found, Error Handling, Not sure

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 with the linked reproduction, its package.json, and example.scss, then run npm run build with the reported Next.js and next-rspack versions. Trace how the CSS warning is emitted during the build. Done means the warning identifies the original source file and line or column instead of only the hashed static CSS file.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js, sass
Domain
build-system, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.