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

  }
}

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.

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 node-sass@4.12

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.

Uninstall node-sass:

npm uninstall node-sass

Use sass by:

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

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

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

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 node-sass@4.14.1

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

This is version problem. Install the right dependent version:

npm uninstall node-sass
npm install node-sass@4.14.1

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

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.

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

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>

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

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]

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

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

Delete a yarn.lock file in the project and

yarn remove node-sass
yarn add node-sass

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

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

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

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:

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 build, you should also:

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

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

This should work.