next.js: Global SCSS not working

Verify canary release

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

Provide environment information

inversion less than 13 it was working , but after updating next.js to ^13.0 it is failing to build in dev mode.

import '../styles.scss';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

error for next.js 13

 unhandledRejection: Error: Cannot find module 'D:\nextjs\node_modules\next\dist\compiled\sass-loader/fibers.js'
.
.
.
.
  code: 'MODULE_NOT_FOUND'

Which area(s) of Next.js are affected? (leave empty if unsure)

Script optimization (next/script)

Link to the code that reproduces this issue

yarn run dev

To Reproduce

change version from 12 to 13 …it is failing to run yarn run dev script

Describe the Bug

Global SCSS not loading

Expected Behavior

it should build if we are using next.js 13 and SASS package

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

About this issue

Original URL
State: closed
Created a year ago
Reactions: 24
Comments: 52 (1 by maintainers)

Commits related to this issue

Drop node 14, related issue https://github.com/vercel/next.js/issues/45052 — committed to kitloong/nextjs-dashboard by kitloong a year ago
sass 적용 - next js 13.1.2 버전 부터 sass 버그가 있어 구버전으로 변경 - github.com/vercel/next.js/issues/45052 — committed to kimminhyug/kill-time by kimminhyug a year ago
Drop node 14, related issue https://github.com/vercel/next.js/issues/45052 — committed to ZigZag48/nextjs-admin-temp by kitloong a year ago
Drop node 14, related issue https://github.com/vercel/next.js/issues/45052 — committed to ZigZag48/nextjs-admin-temp by ZigZag48 a year ago
Fix global SCSS on Node.js <= 14 (#50185) Fixes #45052. See the comments and related issue thread. — committed to vercel/next.js by shuding a year ago
Fix global SCSS on Node.js <= 14 (#50185) Fixes #45052. See the comments and related issue thread. — committed to hydRAnger/next.js by shuding a year ago

Most upvoted comments

After digging into the sass-loader, I have discovered an undocumented setting that addresses the issue. It seems that sass-loader conditionally detects the node version and choses to load fibers. The problem is there is a validation step checking for fibers when it was purposefully not loaded.

To turn off fibers completely for lower versions of nodejs you will need to adjust your sassOptions in next.config.js

const path = require('path')

module.exports = {
  sassOptions: {
    fiber: false,
    includePaths: [path.join(__dirname, 'styles')],
  },
}

+30

AdamDavidson1 on Mar 14, 2023

@tufail Had the same problem here. I rolled back just to v13.1.1 and everything’s fine.

Must be a bug in the update a week ago.

mmeigs on Jan 19, 2023

Not sure if is good information, but i having the same issue. 13.1.6 hanging on npm run build and npm run dev. However I have 2 laptop and the second one did not have the issue. only difference is that the one where it hangs use Node 14,the other 16. I switch to 16 and 18 to test and it works fine, revert to node 14 make the issue return.

eduardochiaro on Jan 30, 2023

Not sure if is good information, but i having the same issue. 13.1.6 hanging on npm run build and npm run dev. However I have 2 laptop and the second one did not have the issue. only difference is that the one where it hangs use Node 14,the other 16. I switch to 16 and 18 to test and it works fine, revert to node 14 make the issue return.

Can confirm that updating from Node 14->18 also fixed this issue for me.

tomgreeEn on Jan 30, 2023

I got the same problem with node v18.13.0 and nextjs v13.2.4. On my local machine all works (also npm run build), but when I deploy on Vercel I got this error:

Expand 27 Lines
--
16:13:33.493 | unhandledRejection Error: Cannot find module '/vercel/path0/node_modules/next/dist/compiled/sass-loader/fibers.js'
16:13:33.494 | at webpackEmptyContext (/vercel/path0/node_modules/next/dist/compiled/sass-loader/cjs.js:1:11235)
16:13:33.494 | at getSassOptions (/vercel/path0/node_modules/next/dist/compiled/sass-loader/cjs.js:1:5586)
16:13:33.494 | at Object.loader (/vercel/path0/node_modules/next/dist/compiled/sass-loader/cjs.js:1:2683)
16:13:33.494 | at LOADER_EXECUTION (/vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4134)
16:13:33.495 | at runSyncOrAsync (/vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4145)
16:13:33.495 | at iterateNormalLoaders (/vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5782)
16:13:33.495 | at /vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5426
16:13:33.495 | at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:28:395994
16:13:33.495 | at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:13:28771), <anonymous>:14:1)
16:13:33.495 | at /vercel/path0/node_modules/next/dist/build/webpack/plugins/profiling-plugin.js:111:29 {
16:13:33.495 | code: 'MODULE_NOT_FOUND'
16:13:33.495 | }
16:13:33.521 | Error: Command "npm run build" exited with 1
16:13:33.842 | BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1

My workaround is to add in next.config.js these lines:

module.exports = {
  sassOptions: {
    fiber: false
  }
}

thank you, kind man, it helped

yakuznecov on Apr 13, 2023

Node version update has solved the issue for me… I used the node standard version of 18.15.0… Thanks! @monsieurnebo

Saravanakumar96 on Apr 1, 2023

I can confirm the same, these build issues go away with node v16.

However, that said, this gives me significant stability concerns that bumping up a patch release of nextjs would break things this much and require an upgrade of the node runtime. The upgrade guide indicates that node v14.6.0 is the minimum node version supported (https://nextjs.org/docs/upgrading), so I think this underlying issue still needs to be addressed rather than punting and just declaring end of support for node v14.

kevintap-idemia on Feb 2, 2023

Try to downgrade next version from “13.2.4” to “13.2.1”. which is worked for me @amrutapawar25

Saravanakumar96 on Apr 3, 2023

still facing same issue. I am using node v18.15.0, “next”: “13.2.4”,

amrutapawar25 on Apr 1, 2023

After digging into the sass-loader, I have discovered an undocumented setting that addresses the issue. It seems that sass-loader conditionally detects the node version and choses to load fibers. The problem is there is a validation step checking for fibers when it was purposefully not loaded.

To turn off fibers completely for lower versions of nodejs you will need to adjust your sassOptions in next.config.js
const path = require('path')

module.exports = {
  sassOptions: {
    fiber: false,
    includePaths: [path.join(__dirname, 'styles')],
  },
}

@AdamDavidson1 This seems to work for me as well!

raoulguillermo on Mar 30, 2023

I got the same problem with node v18.13.0 and nextjs v13.2.4. On my local machine all works (also npm run build), but when I deploy on Vercel I got this error:

Expand 27 Lines
--
16:13:33.493 | unhandledRejection Error: Cannot find module '/vercel/path0/node_modules/next/dist/compiled/sass-loader/fibers.js'
16:13:33.494 | at webpackEmptyContext (/vercel/path0/node_modules/next/dist/compiled/sass-loader/cjs.js:1:11235)
16:13:33.494 | at getSassOptions (/vercel/path0/node_modules/next/dist/compiled/sass-loader/cjs.js:1:5586)
16:13:33.494 | at Object.loader (/vercel/path0/node_modules/next/dist/compiled/sass-loader/cjs.js:1:2683)
16:13:33.494 | at LOADER_EXECUTION (/vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4134)
16:13:33.495 | at runSyncOrAsync (/vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4145)
16:13:33.495 | at iterateNormalLoaders (/vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5782)
16:13:33.495 | at /vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5426
16:13:33.495 | at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:28:395994
16:13:33.495 | at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:13:28771), <anonymous>:14:1)
16:13:33.495 | at /vercel/path0/node_modules/next/dist/build/webpack/plugins/profiling-plugin.js:111:29 {
16:13:33.495 | code: 'MODULE_NOT_FOUND'
16:13:33.495 | }
16:13:33.521 | Error: Command "npm run build" exited with 1
16:13:33.842 | BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1

My workaround is to add in next.config.js these lines:

module.exports = {
  sassOptions: {
    fiber: false
  }
}

pioz on Mar 21, 2023

I think this is the breaking commit https://github.com/vercel/next.js/commit/12bfabd179838918560e058ddf0b5213e87b66c1

Trallp on Feb 1, 2023