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
}

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
}

• javascript
• next.js
• sass

• 1 Probably worth creating an issue on github – I0_ol Commented Jan 21, 2023 at 17:38
• 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. – Ranu Vijay Commented Jan 21, 2023 at 17:41

3 Answers 3

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

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.

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