NextJS 13.1.4 breaks when adding SCSS support "Cannot find module next/dist/compiled/sass-loader/fibers.js"

Question

With a fresh install of NextJS I wanted to add SCSS support. The documentation is very clear about it how to do this. When I install as described and add an import of scss as follows:

import "@/styles/styles.scss";
import type { AppProps } from "next/app";

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

Then run npm run dev. In the browser my page keeps loading. When I exit the script and remove the line import "@/styles/styles.scss"; and then run the dev command the page will show up in my browser, but when I enable again the scss import again I get a compile error.

error - unhandledRejection: Error: Cannot find module '/...../node_modules/next/dist/compiled/sass-loader/fibers.js'
    at webpackEmptyContext (/...../node_modules/next/dist/compiled/sass-loader/cjs.js:1:11235)
    at getSassOptions (/.....//node_modules/next/dist/compiled/sass-loader/cjs.js:1:5586)
    at Object.loader (/.....//node_modules/next/dist/compiled/sass-loader/cjs.js:1:2683)
    at LOADER_EXECUTION ......
 {
  code: 'MODULE_NOT_FOUND
}

Answer 1

This is a known issue since version 13.1.2, only 13.1.1 seems to work with SASS.

Bug report is here: https://github.com/vercel/next.js/issues/45052

UPDATE: Most people seem to have solved this issue by upgrading to Node 16 and above. It fixed the issue for me.

UPDATE 2: Another fix is available for older Node versions, read more on this link: https://github.com/vercel/next.js/issues/45052#issuecomment-1468754780

Answer 2

This bug seems to be fixed as of next version 13.1.6

Please note that upgrading to that version of next will cause the build to hang on node v14. Switching to node 16 or 18 seems to be working fine though.