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
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
@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.
Not sure if is good information, but i having the same issue.
13.1.6
hanging onnpm run build
andnpm 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 useNode 14
,the other16
. I switch to16
and18
to test and it works fine, revert tonode 14
make the issue return.Can confirm that updating from Node 14->18 also fixed this issue for me.
thank you, kind man, it helped
Node version update has solved the issue for me… I used the node standard version of 18.15.0… Thanks! @monsieurnebo
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.
Try to downgrade next version from “13.2.4” to “13.2.1”. which is worked for me @amrutapawar25
still facing same issue. I am using node v18.15.0, “next”: “13.2.4”,
@AdamDavidson1 This seems to work for me as well!
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:My workaround is to add in
next.config.js
these lines:I think this is the breaking commit https://github.com/vercel/next.js/commit/12bfabd179838918560e058ddf0b5213e87b66c1