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

  }
}

Nicolas Hevia · Accepted Answer · 2021-12-28T19:08:54.703

1164

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

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.

edited Dec 28 '21 at 19:08

answered Oct 31 '20 at 21:26

Nicolas Hevia

15,143
4
22
31

16

for some reason `yarn add node-sass@4.14.1` is much quicker – Tylik Stec Nov 01 '20 at 09:17
6

Looks like they just fixed that in https://github.com/webpack-contrib/sass-loader/commit/c3e279fb4668fce4c597a6c8cd1d0f2ff8bc95e5 , so you can install sass-loader@10.0.5 – Marcin Nov 02 '20 at 12:25
5

@TylikStec yarn is another package manager, but don't use both in the same project, having two lock files may cause issues in deployment – Binara Medawatta Nov 03 '20 at 11:43
24

@marcin it's funny that you say "they" since the person who posted the answer is the one who fixed it :] – Benjamin Gruenbaum Nov 03 '20 at 18:49
`yarn remove node-sass` and `yarn add node-sass@4` did it for me. – RonquilloAeon Nov 26 '20 at 15:00
4

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+. – Brendan Dec 02 '20 at 21:36
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: https://github.com/sass/node-sass/releases/tag/v4.14.1 – Tahazzot Feb 02 '21 at 16:40
2

Why does it seem like there is no "right" resolution here? Who is dragging their feet on moving this forward? – dmikester1 Mar 02 '21 at 22:27
since it's unsupported we may use ***sass package*** instead – Alexey Nikonov May 05 '21 at 17:10
1

I tried npm install node-sass@4.14.1 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! – Weirdali Jul 20 '21 at 11:54
Im switchin gover to LESS. This is too much for me – Oliver Watkins Dec 18 '21 at 09:08

score 105 · Answer 2 · edited Aug 16 '22 at 23:36

105

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.

edited Aug 16 '22 at 23:36

Peter Mortensen

30,738
21
105
131

answered Nov 14 '20 at 10:50

Titus Sutio Fanpula

3,467
4
14
33

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). – Nicolas Hevia Nov 15 '20 at 12:00
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 node-sass@4.12`. 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 – Titus Sutio Fanpula Nov 15 '20 at 13:38
This works in contrast to the other suggestions. – Dejan Toteff Feb 03 '21 at 00:35
This works, i had some issues installing node-sadd@4 – Florian Apr 22 '21 at 08:15
2

but my node version is `v16.9.1` & node-sass `6.0.1` is compatible with that node version – Zeeshan Ahmad Khalil Sep 20 '21 at 13:12
@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. – Titus Sutio Fanpula Jan 09 '22 at 02:57

score 62 · Answer 3 · edited Sep 05 '21 at 13:43

62

Uninstall node-sass:

npm uninstall node-sass

Use sass by:

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

edited Sep 05 '21 at 13:43

Peter Mortensen

30,738
21
105
131

answered Nov 01 '20 at 14:07

nooneswarup

761
5
5

9

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. – Nicolas Hevia Nov 12 '20 at 15:16
2

And also, be careful with global installs. – Raydot Dec 04 '20 at 22:04
3

Avoid global installs for project specific dependencies. You can always reference a local dependency with npx example `npx sass` while in the project repo. – fengelhardt Dec 09 '20 at 20:22
1

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! – Mike Dec 23 '20 at 09:10
This is the best answer because webpack highly recommend using `Dart Sass` – Mo. May 20 '21 at 18:40
This should be the answer. – Ketan Sep 05 '21 at 21:09

score 51 · Answer 4 · answered May 12 '21 at 00:10

51

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

answered May 12 '21 at 00:10

yoel halb

12,188
3
57
52

Even after that yarn solution, I get Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0. – saner Jul 27 '21 at 17:18
@Erik Martines Sanches From the error message it is obvious that node sass was not uninstalled – yoel halb Jul 30 '21 at 03:51
@ErikMartinesSanches try to restart your node server after installation. – Yonatan Dawit Jul 31 '21 at 12:18
this solution works for me – MK. Feb 10 '22 at 20:58

score 20 · Answer 5 · edited Sep 05 '21 at 14:26

20

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

edited Sep 05 '21 at 14:26

Peter Mortensen

30,738
21
105
131

answered Jun 28 '21 at 14:08

tngeene

370
2
7

node-sass is not listed in my package.json even before trying "yarn remove node-sass". – saner Jul 27 '21 at 17:14
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. – tngeene Aug 19 '21 at 07:30

score 14 · Answer 6 · edited Aug 16 '22 at 23:34

14

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

edited Aug 16 '22 at 23:34

Peter Mortensen

30,738
21
105
131

answered Nov 17 '20 at 19:02

dhanushkac

520
2
8
25

score 8 · Answer 7 · edited Apr 16 '21 at 05:26

8

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

edited Apr 16 '21 at 05:26

Brian Burns

20,575
8
83
77

answered Mar 28 '21 at 16:16

Sathira Nipun

186
2
8

1

Confirmed this works with Node 15 and node-sass 5.0.0. – Thomas Higginbotham Apr 09 '21 at 13:53
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 – Nir O. May 02 '21 at 16:39
Changing react-scripts version helped me a lot. Thank you. – Mahdiyeh Jul 29 '22 at 10:16

score 5 · Answer 8 · edited Aug 16 '22 at 23:30

5

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.

edited Aug 16 '22 at 23:30

Peter Mortensen

30,738
21
105
131

answered Sep 03 '21 at 18:51

Jean-Marc

740
8
9

this answer solved my problem – 黃皓哲 Nov 15 '21 at 11:48

score 4 · Answer 9 · edited Aug 16 '22 at 23:35

4

It worked for me after adding a particular version of the node-sass package (node-sass@4.14.1).

edited Aug 16 '22 at 23:35

Peter Mortensen

30,738
21
105
131

answered Dec 04 '20 at 13:34

renu dadhich

71
4

score 4 · Answer 10 · edited Sep 05 '21 at 14:57

4

This is version problem. Install the right dependent version:

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

edited Sep 05 '21 at 14:57

Peter Mortensen

30,738
21
105
131

answered Feb 04 '21 at 10:19

score 3 · Answer 11 · edited Aug 16 '22 at 23:22

3

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.

edited Aug 16 '22 at 23:22

Peter Mortensen

30,738
21
105
131

answered Mar 29 '22 at 16:19

Mark O

927
9
13

don't underestimate last answer! This belief helped me repeatedly – adjustment layer Apr 22 '22 at 13:13

score 2 · Answer 12 · edited Aug 16 '22 at 23:34

2

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

Step 5: wait until the command successfully runs.

Step 6: start-server using npm start

edited Aug 16 '22 at 23:34

Peter Mortensen

30,738
21
105
131

answered Dec 03 '20 at 15:29

Nadeem Khan

127
2
11

score 2 · Answer 13 · edited Aug 16 '22 at 23:32

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>

score 1 · Answer 14 · edited Sep 05 '21 at 14:22

1

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

edited Sep 05 '21 at 14:22

Peter Mortensen

30,738
21
105
131

answered Feb 01 '21 at 10:24

suresh

1,977
1
8
8

Re *"Visual Studio"*: Do you mean *"[Visual Studio Code](https://en.wikipedia.org/wiki/Visual_Studio_Code)"*? – Peter Mortensen Sep 05 '21 at 14:22

score 1 · Answer 15 · answered May 09 '21 at 05:22

1

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

answered May 09 '21 at 05:22

Rocky

515
1
7
18

score 1 · Answer 16 · answered Jun 03 '21 at 08:42

1

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

answered Jun 03 '21 at 08:42

Vishal Pratap

121
3

score 1 · Answer 17 · answered Nov 15 '21 at 11:36

1

Delete a yarn.lock file in the project and

yarn remove node-sass
yarn add node-sass

answered Nov 15 '21 at 11:36

Netanel Mantzur

31
2

what does the lock file do? why nobody else suggests this? – Rohit Kumar Nov 09 '22 at 07:02

score 1 · Answer 18 · answered Dec 05 '22 at 11:39

1

npm uninstall node-sass

npm i sass

answered Dec 05 '22 at 11:39

Sourabh Gera

862
7
7

score 0 · Answer 19 · answered Oct 13 '21 at 04:21

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

score 0 · Answer 20 · answered Oct 21 '21 at 03:23

0

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

answered Oct 21 '21 at 03:23

Learn More

937
1
8
8

score 0 · Answer 21 · answered Oct 25 '21 at 06:35

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

score 0 · Answer 22 · edited Aug 16 '22 at 23:30

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:

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

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

score -4 · Answer 23 · edited Mar 07 '23 at 03:58

-4

Steps to resolve this issue:

Go to your node_module folder and open node-sass modules.
In the package.json file inside node-sass, change the version from "5.0.0" to "4.14.1".
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."

edited Mar 07 '23 at 03:58

Ahmed Sbai

10,695
9
19
38

answered Apr 02 '21 at 19:28

adam ali

21
2

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

File App.js

File package.json

23 Answers23

Linked