search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
121.29k stars 25.95k forks source link

(turbopack) doesn't support mixing units in sass calculations, while webpack does #65241

Open stabildev opened 2 weeks ago

stabildev commented 2 weeks ago

Link to the code that reproduces this issue

https://github.com/darkroomengineering/satus

To Reproduce

  1. Clone the repo
  2. Update packages to lastest, esp. nextjs
  3. Replace next dev with next dev --turbo in package.json

Current vs. Expected behavior

Current behavior: 

⨯ ModuleBuildError: ./styles/global.scss
Error evaluating Node.js code
SassError: SassError: calc(1600px * 1vw) isn't a valid CSS value.
   ╷
27 │   @return math.div($pixels * 100vw, $base-vw);
   │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  styles/_functions.scss 27:11  mobile-vw()
  styles/_layout.scss 38:27     @import
  styles/global.scss 7:9        root stylesheet

Expected behavior: Tolerate mixing units like webpack does

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:11:05 PDT 2024; root:xnu-10063.101.17~1/RELEASE_X86_64
  Available memory (MB): 16384
  Available CPU cores: 12
Binaries:
  Node: 21.6.2
  npm: 10.2.4
  Yarn: 1.22.21
  pnpm: 8.15.4
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

Not affiliated with satus

Can't provide more in depth context as I am not familiar with sass

PACK-3032

timneutkens commented 1 week ago

Seems the root cause is that this Sass option is used but that won't work with Turbopack as it's passing JavaScript functions: https://github.com/darkroomengineering/satus/blob/d1e3a0aa6798ebcc8ed470080c1d330e7739ba25/next.config.js#L45-L56 We'll have to implement a hard error when such config is passed. For Turbopack the config is serialized so that it can be passed to the loader.

stabildev commented 1 week ago

Is there a workaround to somehow use Turbopack in this scenario?

timneutkens commented 1 week ago

Removing the function config and just setting the value directly in Sass instead.