turbo: [Turbopack] Does not support sass/scss

What version of Turbopack are you using?

1.6.0

What package manager are you using / does the bug impact?

Yarn v1

What operating system are you using?

Mac

Describe the Bug

So it seems turbo cant compile sass/scss. The normal compiler works fine. This was using the simple starter example from next but with sass 1.55.0

Stacktrace

>>> TURBOPACK (alpha)

Thank you for trying Next.js v13 with Turbopack! As a reminder,
Turbopack is currently in alpha and not yet ready for production.
We appreciate your ongoing support as we work to make it ready
for everyone.

Learn more about Next.js v13 and Turbopack: https://nextjs.link/with-turbopack
Please direct feedback to: https://nextjs.link/turbopack-feedback

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - initial compilation 2.131ms
error - [rendering] [root of the dev server]/
  Error during SSR Rendering
  ReferenceError: styles is not defined
    at Home (.next/server/pages/chunks/pages_index.tsx.js:7:20)
    at renderWithHooks (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at retryTask (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6528:5)
    at performWork (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6576:7)
    at <unknown> (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6902:12)
    at scheduleWork (node_modules/react-dom/cjs/react-dom-server.browser.development.js:77:3)
    at startWork (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6901:3)
    at <unknown> (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6996:5)
    at <anonymous>
    at Object.renderToReadableStream (node_modules/react-dom/cjs/react-dom-server.browser.development.js:6949:10)
    at Object.renderToInitialStream (node_modules/next/dist/server/node-web-streams-helper.js:124:27)
    at renderShell (node_modules/next/dist/server/render.js:765:57)
    at Object.renderPage (node_modules/next/dist/server/render.js:681:28)
    at Object.defaultGetInitialProps (node_modules/next/dist/server/render.js:360:67)
    at Document.getInitialProps (node_modules/next/dist/pages/_document.js:19:20)
    at Object.<anonymous> (node_modules/next/dist/shared/lib/utils.js:84:33)
    at <anonymous>
    at asyncGeneratorStep (node_modules/@swc/helpers/lib/_async_to_generator.js:23:28)
    at _next (node_modules/@swc/helpers/lib/_async_to_generator.js:12:17)
    at <unknown> (node_modules/@swc/helpers/lib/_async_to_generator.js:17:13)
    at <anonymous>
    at Object.<anonymous> (node_modules/@swc/helpers/lib/_async_to_generator.js:9:16)
    at Object.loadGetInitialProps (node_modules/next/dist/shared/lib/utils.js:62:33)
    at loadDocumentInitialProps (node_modules/next/dist/server/render.js:703:48)
    at renderDocument (node_modules/next/dist/server/render.js:790:49)
    at Object.renderToHTML (node_modules/next/dist/server/render.js:828:34)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async runOperation (.next/server/pages/chunks/_f03781.js:148:4)
    at async (.next/server/pages/chunks/_f03781.js:49:17)
  

event - updated in 640ms
event - updated in 256ms

Expected Behavior

It should compile

To Reproduce

Start an example project. Add sass to it. Change css files to scss. Run turbo. It should fail

Reproduction Repo

No response

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 24
  • Comments: 16 (1 by maintainers)

Most upvoted comments

Also having the same set of issues. Using a global styles.scss works fine when importing via _app.tsx however using modules is where I run into issues

+3
uixmat on Nov 4, 2022

Same here, wanna try the new turbo pack but it doen’t work with sass

+3
slogivew on Oct 30, 2022

The remaining issues are tracked over here https://github.com/vercel/next.js/issues/60088

+2
ForsakenHarmony on Feb 15, 2024

Would love an update on this one, as we need to import scss files from node_modules pretty frequently and this is an unfortunate hoop we have to jump through in order to offer Turbopack support

+2
jmikrut on Feb 14, 2024

I saw “basic sass support” was implemented in https://github.com/vercel/turbo/pull/4985 🙏 Perhaps this issue can now be updated or closed, @padmaia?

as soon as you https://github.com/import or https://github.com/extend etc in a module.scss file, turbo fails. It cannot resolve the referenced file

In case this affects you @LucaNerlich: I had to update my @import statements to get them to resolve, as below. (I don’t know whether these changes are intended behaviour or incomplete implementation).

  1. Replace using the apparently now-deprecated ~ prefix to indicate node_modules, instead using relative paths from my package root:

    E.g. from within my monorepo ~/packages/web/styles/global.scss - replace with ../../node_modules/ to go up 2 levels from ~/packages/web/ to the monorepo root before descending into node_modules:

-@import "~bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/functions";

  1. Update my relative imports to resolve from my package root, rather than the path to the current scss file containing the @import:

    E.g. to import packages/web/styles/imported-file.scss in packages/web/styles/global.scss:

-@import "./imported-file";
+@import "styles/imported-file";
+2
andyjy on Jul 20, 2023

@LucaNerlich updated my comment above to demonstrate how I got my relative imports working also.

+1
andyjy on Jul 20, 2023

simple usage of .scss and module.scss files now seems to work with nextjs and turbo, however, as soon as you @import or @extend etc in a module.scss file, turbo fails. It cannot resolve the referenced file.

+1
LucaNerlich on Jul 20, 2023
Read more comments on GitHub
← turbo: turbo@1.0.25 doesn't detect any packages
turbo: [turbopack] Invariant: AsyncLocalStorage accessed in runtime where it is not available →