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
}

Onslaught

Probably worth creating an issue on github – Wilow

Next.js even breaks when you add an image in components and the image is not present in the public folder, even deleting. .next folder does not work. for me adding an image to public folder and then removing the piece of code worked. – Kilocycle

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

Butz

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.

Kessel

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Panelist

Answer 3

Thanks, the tips helped me, updating to NODE 16 helped

First, update the package lists using the following command:

sudo apt-get update Install the curl package using the following command:

sudo apt-get install curl

Download and install Node.js 16 using the following commands:

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - sudo apt-get install -y nodejs

Verify that Node.js and npm are installed correctly by checking their versions using the following commands:

node -v npm -v

Arnica