Turbopack Sass loader does not resolve imports correctly #60088

meiyingqishi · 2024-01-01T21:39:11Z

Link to the code that reproduces this issue

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

To Reproduce

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

"use client”;

export * from "@primer/react";

Modify layout.tsx.

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>
  )
}

Modify page.tsx.

import "@primer/css/index.scss";

import {
  Button
} from "./reactComponents";

export default function Home() {
  return (
    <main className="d-flex flex-justify-center flex-items-center flex-column mt-3">
      <Button>Button demo</Button>
    </main>
  );
}

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

ok status

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 _Future__propagateToListeners_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 _Future__propagateToListeners_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: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._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: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 _Future__propagateToListeners_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 _Future__propagateToListeners_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: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.<anonymous> (/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 _Future__propagateToListeners_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: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.<anonymous> (/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 _Future__propagateToListeners_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: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.<anonymous> (/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 _Future__propagateToListeners_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.<anonymous> (/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)]

I have also simultaneously submitted the question to the Primer Design System Failure in execution due to compatibility issues with the Primer Design System. primer/react#4071 (comment).

Current vs. Expected behavior

Same as before.

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

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

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

_PACK-2182

The text was updated successfully, but these errors were encountered:

vincent-lecrubier-skydio · 2024-01-10T17:44:09Z

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

Cow258 · 2024-02-23T07:59:26Z

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.

timneutkens · 2024-03-05T14:21:34Z

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 · 2024-03-12T08:45:12Z

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

Cow258 · 2024-03-12T08:54:40Z

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

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

Tested on next@14.2.0-canary.16

timneutkens · 2024-03-23T19:26:15Z

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 vercel/turborepo#7813 which will go out on canary on monday.

Cow258 · 2024-03-31T12:46:56Z

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)

With `--turbo`

About 100ms ~ 200ms

meiyingqishi · 2024-04-02T01:22:53Z

Hi there, @timneutkens

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

timneutkens · 2024-04-10T08:08:49Z

Thanks for confirming, closing this issue 👍

github-actions · 2024-04-26T00:03:59Z

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.

meiyingqishi added the bug Issue was opened via the bug report template. label Jan 1, 2024

github-actions bot added the Turbopack Related to Turbopack with Next.js. label Jan 1, 2024

kdy1 added linear: turbopack Confirmed issue that is tracked by the Turbopack team. and removed bug Issue was opened via the bug report template. labels Jan 2, 2024

This was referenced Feb 15, 2024

[Turbopack] Does not support sass/scss vercel/turborepo#2415

Closed

[Turbopack] weird node_modules import issue vercel/turborepo#6483

Closed

ForsakenHarmony changed the title ~~There is an error when using 'yarn dev --turbo' in the Primer Design System, while 'yarn dev' works fine~~ Turbopack Sass loader does not resolve imports correctly Feb 15, 2024

This comment was marked as spam.

Sign in to view

timneutkens closed this as completed Apr 11, 2024

github-actions bot added the locked label Apr 26, 2024

github-actions bot locked as resolved and limited conversation to collaborators Apr 26, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Turbopack Sass loader does not resolve imports correctly #60088

Turbopack Sass loader does not resolve imports correctly #60088

meiyingqishi commented Jan 1, 2024 •

edited

Loading

vincent-lecrubier-skydio commented Jan 10, 2024

Cow258 commented Feb 23, 2024

This comment was marked as spam.

timneutkens commented Mar 5, 2024

Cow258 commented Mar 12, 2024

Cow258 commented Mar 12, 2024

timneutkens commented Mar 23, 2024

Cow258 commented Mar 31, 2024 •

edited

Loading

meiyingqishi commented Apr 2, 2024

timneutkens commented Apr 10, 2024

github-actions bot commented Apr 26, 2024

Turbopack Sass loader does not resolve imports correctly #60088

Turbopack Sass loader does not resolve imports correctly #60088

Comments

meiyingqishi commented Jan 1, 2024 • edited Loading

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

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

Additional context

vincent-lecrubier-skydio commented Jan 10, 2024

Cow258 commented Feb 23, 2024

Developers need SCSS support in Turbopack

This comment was marked as spam.

timneutkens commented Mar 5, 2024

Cow258 commented Mar 12, 2024

Cow258 commented Mar 12, 2024

timneutkens commented Mar 23, 2024

Cow258 commented Mar 31, 2024 • edited Loading

Without --turbo

With --turbo

meiyingqishi commented Apr 2, 2024

timneutkens commented Apr 10, 2024

github-actions bot commented Apr 26, 2024

meiyingqishi commented Jan 1, 2024 •

edited

Loading

Cow258 commented Mar 31, 2024 •

edited

Loading

Without `--turbo`

With `--turbo`