search

vercel / next.js

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

Turbopack Sass loader does not resolve imports correctly #60088

Closed meiyingqishi closed 5 months ago

meiyingqishi commented 8 months ago

Link to the code that reproduces this issue

https://github.com/meiyingqishi/primer-next-demo

To Reproduce

  1. Install and initialize the project (keep the option default): yarn create next-app.
  2. Add the frameworks: yarn add @primer/css @primer/react styled-components@^5 sass.
  3. Create reactComponents.tsx file in app directory. 
    
"use client”;

export * from "@primer/react";

4. Modify **layout.tsx**.
```typescript
import { 
  BaseStyles, 
  ThemeProvider 
} from "./reactComponents";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider>
          <BaseStyles>{children}</BaseStyles>
        </ThemeProvider>
      </body>
    </html>
  )
}
  1. Modify page.tsx. 
    
import "@primer/css/index.scss";

import { Button } from "./reactComponents";

export default function Home() { return (

); }

6. It’s ok when run `yarn dev`, but it’s not work when run `yarn dev --turbo`.

**ok status**

<img width="421" alt="ok status image" src="https://github.com/vercel/next.js/assets/10324017/1c7e686b-cb9d-4034-9b32-95eb079b94fc">

---------------

**exception for not ok**

./node_modules/@primer/css/index.scss Error evaluating Node.js code SassError: SassError: Can't find stylesheet to import. ╷ 2 │ @import '@primer/primitives/dist/scss/colors/_light.scss’; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/@primer/css/color-modes/themes/light.scss 2:9 @import node_modules/@primer/css/color-modes/index.scss 3:9 @import node_modules/@primer/css/index.scss 14:9 root stylesheet [at /Users/myqs/Downloads/primer-next-demo/node_modules/next/dist/compiled/sass-loader/cjs.js:1:2984] [at Function.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:118035:16)] [at render_closure1.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:101600:12)] [at _RootZone.runBinary$3$3 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:35657:18)] [at _FutureListener.handleError$1 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34182:21)] [at _FuturepropagateToListeners_handleError.call$0 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34488:49)] [at Object._Future__propagateToListeners (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:5074:77)] [at _Future._completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34339:9)] [at _AsyncAwaitCompleter.completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33964:12)] [at Object._asyncRethrow (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4862:17)] [at /Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:25361:20] [at _wrapJsFunctionForAsync_closure.$protected (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4887:15)] [at _wrapJsFunctionForAsync_closure.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33983:12)] [at _awaitOnObject_closure0.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33977:25)] [at _RootZone.runBinary$3$3 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:35657:18)] [at _FutureListener.handleError$1 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34182:21)] [at _FuturepropagateToListeners_handleError.call$0 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34488:49)] [at Object._FuturepropagateToListeners (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:5074:77)] [at _Future._completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34339:9)] [at _AsyncAwaitCompleter.completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33964:12)] [at Object._asyncRethrow (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4862:17)] [at /Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:18963:20] [at _wrapJsFunctionForAsync_closure.$protected (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4887:15)] [at _wrapJsFunctionForAsync_closure.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33983:12)] [at _awaitOnObject_closure0.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33977:25)] [at _RootZone.runBinary$3$3 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:35657:18)] [at _FutureListener.handleError$1 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34182:21)] [at _Future__propagateToListeners_handleError.call$0 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34488:49)] [at Object._FuturepropagateToListeners (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:5074:77)] [at _Future._completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34339:9)] [at _AsyncAwaitCompleter.completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33964:12)] [at Object._asyncRethrow (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4862:17)] [at /Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:18998:20] [at _wrapJsFunctionForAsync_closure.$protected (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4887:15)] [at _wrapJsFunctionForAsync_closure.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33983:12)] [at _awaitOnObject_closure0.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33977:25)] [at _RootZone.runBinary$3$3 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:35657:18)] [at _FutureListener.handleError$1 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34182:21)] [at _FuturepropagateToListeners_handleError.call$0 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34488:49)] [at Object._Future__propagateToListeners (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:5074:77)] [at _Future._completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34339:9)] [at _AsyncAwaitCompleter.completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33964:12)] [at Object._asyncRethrow (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4862:17)] [at /Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:80578:24] [at _wrapJsFunctionForAsync_closure.$protected (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4887:15)] [at _wrapJsFunctionForAsync_closure.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33983:12)] [at _awaitOnObject_closure0.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33977:25)] [at _RootZone.runBinary$3$3 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:35657:18)] [at _FutureListener.handleError$1 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34182:21)] [at _FuturepropagateToListeners_handleError.call$0 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34488:49)] [at Object._FuturepropagateToListeners (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:5074:77)] [at _Future._completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34339:9)] [at _AsyncAwaitCompleter.completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33964:12)] [at Object._asyncRethrow (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4862:17)] [at /Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:86223:20] [at _wrapJsFunctionForAsync_closure.$protected (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4887:15)] [at _wrapJsFunctionForAsync_closure.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33983:12)] [at _awaitOnObject_closure0.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33977:25)] [at Object._rootRunBinary (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:5293:18)] [at StaticClosure. (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:115718:16)] [at _CustomZone.runBinary$3$3 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:35412:39)] [at _FutureListener.handleError$1 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34182:21)] [at _FuturepropagateToListeners_handleError.call$0 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34488:49)] [at Object._FuturepropagateToListeners (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:5074:77)] [at _Future._completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34339:9)] [at _AsyncAwaitCompleter.completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33964:12)] [at Object._asyncRethrow (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4862:17)] [at /Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:85796:24] [at _wrapJsFunctionForAsync_closure.$protected (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4887:15)] [at _wrapJsFunctionForAsync_closure.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33983:12)] [at _awaitOnObject_closure0.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33977:25)] [at Object._rootRunBinary (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:5293:18)] [at StaticClosure. (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:115718:16)] [at _CustomZone.runBinary$3$3 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:35412:39)] [at _FutureListener.handleError$1 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34182:21)] [at _FuturepropagateToListeners_handleError.call$0 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34488:49)] [at Object._FuturepropagateToListeners (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:5074:77)] [at _Future._completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34339:9)] [at _AsyncAwaitCompleter.completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33964:12)] [at Object._asyncRethrow (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4862:17)] [at /Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:80660:20] [at _wrapJsFunctionForAsync_closure.$protected (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4887:15)] [at _wrapJsFunctionForAsync_closure.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33983:12)] [at _awaitOnObject_closure0.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33977:25)] [at Object._rootRunBinary (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:5293:18)] [at StaticClosure. (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:115718:16)] [at _CustomZone.runBinary$3$3 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:35412:39)] [at _FutureListener.handleError$1 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34182:21)] [at _FuturepropagateToListeners_handleError.call$0 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34488:49)] [at Object._Future__propagateToListeners (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:5074:77)] [at _Future._completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:34339:9)] [at _AsyncAwaitCompleter.completeError$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33964:12)] [at Object._asyncRethrow (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4862:17)] [at /Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:85162:20] [at _wrapJsFunctionForAsync_closure.$protected (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:4887:15)] [at _wrapJsFunctionForAsync_closure.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33983:12)] [at _awaitOnObject_closure0.call$2 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:33977:25)] [at Object._rootRunBinary (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:5293:18)] [at StaticClosure. (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:115718:16)] [at _CustomZone.runBinary$3$3 (/Users/myqs/Downloads/primer-next-demo/node_modules/sass/sass.dart.js:35412:39)]


7. I have also simultaneously submitted the question to the **Primer Design System** https://github.com/primer/react/issues/4071#issue-2044951649.

### Current vs. Expected behavior

Same as before.

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:53:18 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6000
Binaries:
  Node: 21.3.0
  npm: 10.2.3
  Yarn: 1.22.21
  pnpm: 8.12.1
Relevant Packages:
  next: 14.0.4
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

Turbopack (--turbo)

Additional context

  1. I have tested it many times, and the issue persists repeatedly.
  2. The local testing environment is macOS Sonoma 14.2.1.
  3. The vscode version is Version: 1.85.1 (Universal).
  4. The same issue occurred when using both npm and pnpm at that time.

PACK-2182

vincent-lecrubier-skydio commented 8 months ago

Same issue here, a project works without turbopack, and fails with this error with turbo.

Cow258 commented 7 months ago

To: Vercel / Next.js / Turbopack Teams

Developers need SCSS support in Turbopack

The integration of SCSS/SASS support in Turbopack could significantly boost its adoption. SCSS compatibility appears to be a critical feature whose absence is currently hindering Turbopack's rise in popularity.

tats-u commented 6 months ago

Without this feature Turbopack and --turbo option can never be said as Production-Ready.

timneutkens commented 6 months ago

Next.js with Turbopack is now passing all tests we have for Sass support, including importing external packages 🙌

Please give it a try using npm install next@canary and let me know if you're running into anything else.

Cow258 commented 6 months ago

@timneutkens Also after saved the changed scss file, the Next.js will never compile again

Cow258 commented 6 months ago

The latest next@canary has fixed the import issue, but after changed the scss file, the Next.js will never compile again, i found a already exists issue, #42375

I also created a fully reproduce repo https://github.com/Cow258/next-turbo-scss-demo

  1. Open packages/client/styles/page/_home.scss
  2. Change the .demo-head color to red
  3. It will never compile again that mean hot reload not working

Tested on next@14.2.0-canary.16

timneutkens commented 6 months ago

Thanks for the report @Cow258, it only happened to imported files indeed which we didn't have a test for. It's been fixed in https://github.com/vercel/turbo/pull/7813 which will go out on canary on monday.

Cow258 commented 5 months ago

I just tested on v14.2.0-canary.50 Using turbo seem slower then without turbo anyway, the scss hot reload issue has been fixed. Thanks.

Without --turbo

About 90ms ~ 120ms (Except for the first compile)

螢幕截圖 2024-03-31 20 39 38

With --turbo

About 100ms ~ 200ms

螢幕截圖 2024-03-31 20 41 11

meiyingqishi commented 5 months ago

Hi there, @timneutkens

I have tested it, and it is working fine now. No issues. Thanks for your nice work!

Screenshot 2024-04-02 at 09 15 44 Screenshot 2024-04-02 at 09 15 14
timneutkens commented 5 months ago

Thanks for confirming, closing this issue 👍

github-actions[bot] commented 5 months ago

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.