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

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"
  },
 ...

  }
}

Solution 1:^[1]

TL;DR

npm uninstall node-sass
npm install sass

Or, if using Yarn

yarn remove node-sass
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.

Solution 2:^[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.

Solution 3:^[3]

Uninstall node-sass:

npm uninstall node-sass

Use sass by:

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

Solution 4:^[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

Solution 5:^[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

Solution 6:^[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]

Solution 7:^[7]

Using npm,

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

or, using yarn -

yarn remove node-sass
yarn add --dev node-sass
as above
yarn install
yarn start

Solution 8:^[8]

This is version problem. Install the right dependent version:

npm uninstall node-sass
npm install [email protected]

Solution 9:^[9]

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

Solution 10:^[10]

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.

Solution 11:^[11]

If the error is

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

Step1: stop the server

Step2: run commands are npm uninstall node-sass

Step3: check node-sass in package.json if node-sass is available in the file then again run Step2.

Step4: npm install [email protected] <=== run command

Step5: wait until the command successfully runs.

Step6: start-server using npm start

Solution 12:^[12]

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>

Solution 13:^[13]

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

in your package.json

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

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

Solution 14:^[14]

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

Solution 15:^[15]

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

Solution 16:^[16]

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:

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

Solution 17:^[17]

Delete a yarn.lock file in the project and

yarn remove node-sass
yarn add node-sass

Solution 18:^[18]

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

Solution 19:^[19]

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

Solution 20:^[20]

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" }

Solution 21:^[21]

Updated answer

Please note Node Sass is depreciated and you may replace it by 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: https://www.npmjs.com/package/node-sass

The below recipe helped me:

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

Before build, you should also:

Remove node_modules directory
Remove lock file:
- npm: Remove package-lock.json
- yarn: Remove yarn.json

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Peter Mortensen
Solution 3	Peter Mortensen
Solution 4	yoel halb
Solution 5	Peter Mortensen
Solution 6	Peter Mortensen
Solution 7	Brian Burns
Solution 8	Peter Mortensen
Solution 9	renu dadhich
Solution 10	Peter Mortensen
Solution 11	TT.
Solution 12
Solution 13	Mark O
Solution 14	Rocky
Solution 15	Vishal Pratap
Solution 16	Peter Mortensen
Solution 17	Netanel Mantzur
Solution 18	Stephanieraymos
Solution 19	Learn More
Solution 20	Mudasir H
Solution 21	Dariusz WoÅºniak

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

File App.js

File package.json

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]

Solution 20:[20]

Solution 21:[21]