21

So, I had used sass before using npm install node-sass for my reactjs project. I'm now working on a new project and wanted to use sass again. With the same syntax npm install node-sass to get it installed, I continued to get

./src/components/Main.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-scripts/node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/components/Main.scss)
Error: Node Sass version 8.0.0 is incompatible with ^4.0.0.

Or

to import sass files, you first need to install node-sass. run `npm install node-sass` or `yarn add node-sass` inside your workspace
...
...

I followed the instructions to have sass installed from the links npmjs sass-lang using these syntaxes

brew install sass/sass/sass

npm install -g sass

but I'm still encountering either errors I mentioned earlier.

I tried deleting the node-module folder, package-lock.json and reinstalled node-modules. That still did not fix the error. Also, I followed how others got around fixing Node Sass version 5.0.0||6.0.0|| 7.0.0 incompatibility issue but that did not fix mine.

I'm seeking help now.

Jalamang Janka
  • 211
  • 1
  • 1
  • 4

5 Answers5

58

Don't use node-sass anymore

node-sass is now deprecated. You can easily fix it by the following.

npm uninstall node-sass
npm install sass

It works fully the same with better stability, You will not need to make any additional changes.

And all Works well !



But if you still prefer to use node-sass

You can use the following table to install the appropriate version node-sass for your installed Node.js version which you can check by the command node --version.

npm install node-sass@(your version)

enter image description here

Abraham
  • 12,140
  • 4
  • 56
  • 92
  • 2
    Doing this: npm uninstall node-sass npm install sass Just asks for node-sass again. – NickJ Dec 17 '22 at 22:51
  • To import Sass files, you first need to install node-sass. Error after uninstalling – Ankit Feb 07 '23 at 13:09
  • @Nickj maybe clear `node-sass` from your `package.json` file – Abraham Feb 07 '23 at 13:58
  • @Abraham The problem was react scripts no longer includes node-sass so you have to do a multitude of steps to get the processing back. The easiest solution is not to use the latest version of react-scripts sadly. – NickJ Feb 17 '23 at 20:08
  • 1
    This should be the Accepted Answer. It definitely solves the issue by switching to the sass package. Thank you! – Jim Gomes Feb 21 '23 at 18:41
5

update sass-loader, or remove and install again.

Carlos Vz
  • 59
  • 2
  • 2
    Thank you..... What ended up working for me is doing ``` npm uninstall node-sass npm install node-sass change the "react-scripts": "4.0.0" into "react-scripts": "4.0.3" in package.json and save npm install npm start ``` I got it from [www.codegrepper.com](https://www.codegrepper.com/code-examples/javascript/Error%3A+Node+Sass+version+5.0.0+is+incompatible+with+%5E4.0.0.) – Jalamang Janka Nov 24 '22 at 19:20
  • also depends on which VueJS version you use, for 2.6.x you cannot use today's version of sass-loader (12), you must stick to v10 --> `sass-loader@^10`. credits to @D_Pain on [its answer](https://stackoverflow.com/questions/66082397/typeerror-this-getoptions-is-not-a-function). – Christophe Deliens Jan 20 '23 at 14:51
3

Try this: In your packege.json file, delete "node-sass": "^4.12.0" and replace it with "sass": "". This did it for me.

Abraham
  • 12,140
  • 4
  • 56
  • 92
Mohammad Mahjoub
  • 417
  • 4
  • 12
3

You can follow these two steps:

  1. Uninstall your node-sass: npm uninstall node-sass
  2. Install old version node-sass: npm install --save-dev --unsafe-perm node-sass@4.14.1

It's okay now

Abraham
  • 12,140
  • 4
  • 56
  • 92
cheikh78 ndongo
  • 39
  • 1
1

The answer for me was to update react-scripts to 4.0.3. I couldn't do the latest version of react-scripts because it still requires a bunch of hacks to make packages work that had polyfilled modules automatically loaded before.

Abraham
  • 12,140
  • 4
  • 56
  • 92
NickJ
  • 512
  • 4
  • 10