Error: 'node-sass' version 5.0.0 is incompatible with ^4.0.0

Question

I've created a blank React project, using the command: npx create-react-app on npm v7.0.7 and Node.js v15.0.1

Installed:

• React v17.0.1,
• node-sass v5.0.0,

Then I tried to import a blank .scss file to the App component:

File App.js

import './App.scss'

function App() {
  return (
    <div className="App">
      App
    </div>
  );
}

export default App;

It throws an error:

Failed to compile.

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s
ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

File package.json

{
  "name": "react-17-node-sass-5",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "node-sass": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
 ...

  }
}

Biaxial

Answer 1

TL;DR

1. npm uninstall node-sass
2. npm install sass

Or, if using Yarn

1. yarn remove node-sass
2. yarn add sass

Edit3: yes, another edit. Moving to sass (dart-sass) is the best solution. Previous one included locking node-sass to version 4.x.x, which is 2 years old and lacks newer SCSS features.

---

Edit2: sass-loader v10.0.5 fixes it. The problem is you might not be using it as a project dependency, but more as a dependency of your dependencies. CRA uses a fixed version, angular-cli locks to node-sass v4, and so on.

The recommendation for now is: if you're installing just node-sass, check the below workaround (and the note). If you're working on a blank project and you can manage your Webpack configuration (not using CRA or a CLI to scaffold your project), install the latest sass-loader.

---

Edit: this error comes from sass-loader. There is a semantic versioning mismatch since node-sass @latest is v5.0.0 and sass-loader expects ^4.0.0.

There is an open issue on their repository with an associated fix that needs to be reviewed. Until then, refer to the solution below.

---

Workaround: don't install node-sass 5.0.0 yet (the major version was just bumped).

Uninstall node-sass

npm uninstall node-sass

Then install the latest version (before 5.0)

npm install [email protected]

---

Note: LibSass (hence node-sass as well) is deprecated and dart-sass is the recommended implementation. You can use sass instead, which is a Node.js distribution of dart-sass compiled to pure JavaScript.

Methane

for some reason yarn add [email protected] is much quicker – Legato

Looks like they just fixed that in github.com/webpack-contrib/sass-loader/commit/… , so you can install [email protected] – Canicula

@TylikStec yarn is another package manager, but don't use both in the same project, having two lock files may cause issues in deployment – Lichter

@marcin it's funny that you say "they" since the person who posted the answer is the one who fixed it :] – Chlordane

yarn remove node-sass and yarn add node-sass@4 did it for me. – Anytime

On a brand new React project similar to OP, I have "node-sass": "v5.0.0" and "sass-loader": "^10.1.0", but the problem persists. My Node version is 15.3.0. When I uninstall node-sass and re-install @4.14.1, the problem persists since I am using Node version 15.3.0 which expects node-sass version 5.0+. – Ury

I got Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (88) For more information on which environments are supported please see: github.com/sass/node-sass/releases/tag/v4.14.1 – Lighten

Why does it seem like there is no "right" resolution here? Who is dragging their feet on moving this forward? – Retuse

since it's unsupported we may use sass package instead – Bramante

I tried npm install [email protected] and was met with 'npm ERR! code 1 path ../node-modules/node-sass command failed ... gyp info it worked if it ends with ok ...' and the error just keeps going and going. yarn add worked fine though! – Vic

Im switchin gover to LESS. This is too much for me – Sustentation

Answer 2

The only one reason why you get some error like that, is because your Node.js version is not compatible with your node-sass version.

So, make sure to checkout the documentation at node-sass.

Or this image below will be help you in deciding what Node.js version can use the node-sass version.

For an example, if you're using Node.js version 12 on your Windows system ("maybe"), then you should have to install the node-sass version 4.12.

npm install [email protected]

Yeah, like that. So now you only need to install the node-sass version recommended by the node-sass team with Node.js version installed on your computer.

Thirdrate

With this approach you're locked to v4.x, instead of having the latest version of v4. For example node 12 would be stuck with 4.12 even if it supports 4.14. npm update node-sass would not work unless you used npm install node-sass@^4.12 which is the same than installing 4.14.1 (latest known version of v4). – Methane

Thank's for your response Nicolas Hevia, but I've been try that code above and you're right, it's can't update that version of node-sass if I'm use npm install [email protected]. But I've been try with node-sass 4.14.1 in nodejs 12.18.3 and it's not working. That's why I recomended to use the version what the node-sass team recomended and I'm not use ^. Because it will update to the latest version of node-sass 4 – Thirdrate

This works in contrast to the other suggestions. – Allaallah

This works, i had some issues installing node-sadd@4 – Billbug

but my node version is v16.9.1 & node-sass 6.0.1 is compatible with that node version – Triple

@Zeeshan Ahmad Khalil: Recommended doesn't mean you should use it. That means you can use something else but something else can cause an error or it might work. But what is suggested usually will work. – Thirdrate

Answer 3

Uninstall node-sass:

npm uninstall node-sass

Use sass by:

npm install -g sass
npm install --save-dev sass

Caoutchouc

Be careful using this approach. React-scripts uses sass-loader v8, which prefers node-sass to sass (which has some syntax not supported by node-sass). If both are installed and the user worked with sass, this could lead to errors on css compilation. – Methane

And also, be careful with global installs. – Salian

Avoid global installs for project specific dependencies. You can always reference a local dependency with npx example npx sass while in the project repo. – Unload

I'm using node v14.15.3 with node-sass 4.14.1 and only the sass approach works. Uninstalling and rebuilding node-sass or upgrading it to 5.x didn't solve the problem. Thanks! – Thereinafter

This is the best answer because webpack highly recommend using Dart Sass – Rutledge

This should be the answer. – Dihedron

Answer 4

node-sass aka LibSass is officially deprecated as of October 26 2020 and instead you should use sass aka Dart Sass.

For npm you could do:

npm uninstall node-sass
npm install sass --save-dev

For yarn do:

yarn remove node-sass
yarn add sass

Militia

Even after that yarn solution, I get Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0. – Height

@Erik Martines Sanches From the error message it is obvious that node sass was not uninstalled – Militia

@ErikMartinesSanches try to restart your node server after installation. – Maniac

this solution works for me – Overscrupulous

Answer 5

The best solution for me was uninstalling node-sass.

npm uninstall node-sass

then install sass:

npm install sass

For those using Yarn:

yarn remove node-sass
yarn add sass

Homologate

node-sass is not listed in my package.json even before trying "yarn remove node-sass". – Height

were you able to fix this? if not maybe you could describe what you've been facing and we can try to work out a solution. – Homologate

Answer 6

If you happen to use CRA with the default Yarn package manager, use the following. It worked for me.

yarn remove node-sass
yarn add [email protected]

Jorie

Answer 7

Using npm,

1. npm uninstall node-sass
2. npm install node-sass
3. change the "react-scripts": "4.0.0" into "react-scripts": "4.0.3" in package.json and save
4. npm install
5. npm start

or, using yarn -

1. yarn remove node-sass
2. yarn add --dev node-sass
3. as above
4. yarn install
5. yarn start

Gothurd

Confirmed this works with Node 15 and node-sass 5.0.0. – Weatherbeaten

didnt work Missing binding /Users/giz/code/genesislabs/client/node_modules/node-sass/vendor/darwin-x64-83/binding.node Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 14.x – Rowel

Changing react-scripts version helped me a lot. Thank you. – Cider

Answer 8

According to the Edit2 of Nicolas Hevia telling that

sass-loader v10.0.5 fixes it

I launched this command:

npm install sass-loader@^10.0.5 node-sass --save-dev

That fixed my issue.

Be aware that I am in a development environment. In other cases, the option --save-dev should be removed.

Carmelcarmela

this answer solved my problem – Gemmiparous

Answer 9

It worked for me after adding a particular version of the node-sass package ([email protected]).

Jell

Answer 10

This is version problem. Install the right dependent version:

npm uninstall node-sass
npm install [email protected]

Procurable

Answer 11

If the error is

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

Step 1: stop the server

Step 2: run commands are npm uninstall node-sass

Step 3: check node-sass in package.json. If node-sass is available in the file then again run Step 2.

Step 4: npm install [email protected] <=== run command

Step 5: wait until the command successfully runs.

Step 6: start-server using npm start

Wit

Answer 12

You can just switch to Sass since node-sass is deprecated now anyway.

In your package.json file:

"node-sass": "npm:sass@^1.49.9",

React still asks for node-sass after removing it and replacing it with Sass, so you can alias it like this and now React will use Sass.

Ileac

don't underestimate last answer! This belief helped me repeatedly – Keffiyeh

Answer 13

I met the same issue, and here's how I was able to fix it:

Firstly, you have to know which node-sass version you are using in your project. Then go upgrade or downgrade your current Node.js version to the compatible version with your current node-sass version, you can know that from this link.

Of course, stop the server, and close your IDE.

So, the best way to upgrade or downgrade the Node.js version, has mentioned above in this answer. Then remove the node_modules, and package-lock.json and install again... You can do it as such:

npm cache clean --force

rm -rf /node_modules package-lock.json

npm install

npm audit fix

npm run <your_script_name>

Espino

Answer 14

Small update: In case if you get the below error in regard to node-sass, follow the steps given below.

code EPERM npm ERR! syscall unlink

Steps to solve the issue:

1. Close Visual Studio
2. Manually remove .node-sass.DELETE from node_modules
3. open Visual Studio
4. npm cache verify
5. npm install [email protected]

Duky

Re "Visual Studio": Do you mean "Visual Studio Code"? – Gander

Answer 15

Just change version to: "version": "4.14.1" in your package.json file

Lavena

Answer 16

Adding sass-loader as as dev-dependency solved this for me. "devDependencies": { "node-sass": "^6.0.0", "sass-loader": "^11.1.1" }

Jaconet

Answer 17

Delete a yarn.lock file in the project and

yarn remove node-sass
yarn add node-sass

Etching

what does the lock file do? why nobody else suggests this? – Crapshooter

Answer 18

npm uninstall node-sass

npm i sass

Cod

Answer 19

In app.js or wherever the css is being imported, make sure to import css and not scss. The script in package.json will create a css file and that's what should be imported.

    "scss": "node-sass --watch -include-path src/scss -o src/css"

This script will watch a scss file inside of a folder called scss that is inside src. It will then create an css folder inside src and add a css file inside that folder, this is the file you should import in app.js

To run the script:

npm run scss

File structure example: src/scss/styles.scss

CSS file created by script: src/css/styles.css

Tann

Answer 20

Or else Rebuild your node-sass so that the compatibility does not produce an error. When the incompatibility between node-sass and node occurs, you will get typescript errors . Do this to achieve node-sass compatibility.

npm rebuild node-sass

Blague

Answer 21

This error is due to an incompatible version of the sass loader with node-sass.

Add these dependencies at the end of your package.json file.

Note: You can google to check which sass-loader version is compatible with your node-sass version.

"devDependencies": { "node-sass": "^6.0.1", "sass-loader": "^10.2.0" }

Indelicate

Answer 22

Please note that Node Sass is deprecated and you may replace it with Dart Sass:

Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

Source: node-sass

The below recipe helped me:

1. Uninstall node-sass:
   • npm: npm uninstall node-sass
   • yarn: yarn remove node-sass
2. Uninstall sass-loader:
   • npm: npm uninstall sass-loader
   • yarn: yarn remove sass-loader
3. Install Dart Sass as a development dependency
   • npm: npm install sass -dev
   • yarn: yarn add sass -dev

Before building, you should also:

1. Remove the node_modules directory
2. Remove lock file:
   • npm: Remove package-lock.json
   • yarn: Remove yarn.json

Counterbalance

Answer 23

Steps to resolve this issue:

1. Go to your node_module folder and open node-sass modules.

2. In the package.json file inside node-sass, change the version from "5.0.0" to "4.14.1".

3. Finally in the package.json at the root of the main project again change node-sass version from "5.0.0" to "4.14.4."

Mim