Node Sass version 6.0.0 is incompatible with ^4.0.0 || ^5.0.0 in React.js

Question

I tried to install sass-loader to compile scss, but it shows a version compatibility error. I downgrade the version and did so many things, but still shows the same issue.

React version- 17.0.2 node version- 16.2.0 npm version - 7.13.0

Package.json

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "antd": "^4.16.2",
    "node-sass": "^4.14.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-scripts": "4.0.3",
    "redux-saga": "^1.1.3",
    "web-vitals": "^1.0.1"
  },

Coretta

This looks like Create React App, is it? – Dysprosium

yeah, Its npx-create-react-app – Coretta

Answer 1

The error seems to come from a version of sass-loader that doesn't handle node-sass@6.

It has been fixed in [email protected] by this pull request.

Also note that if you use node@16, you will have to use node-sass@6 (see node-sass version policy)

To sum up: You can use node-sass@6 given you also install a recent sass-loader version.

Radicel

nothing worked. yarn add sass-loader then yarn add node-sass@6 /yarn add node-sass and still getting Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0. – Patriciate

Answer 2

node-sass is deprecated. Instead use sass.

You can uninstall the old and install the new one.

npm uninstall node-sass

npm install sass

It works all the same, with no other changed needed.

But if you want to use node-sass anyways You can you can install the right version based on your node.js version as follows

npm uninstall node-sass
npm install [email protected]

You can choose your version number based on the following table, based on the node version you have installed, which you can check by the command node --version

I hope it helps you

Sindysine

You're absolutely right! Thanks – Tera

Answer 3

You could try uninstalling node-sass and replacing it with sass. That did it for me.

npm un node-sass
npm i -D sass

Janinajanine

Answer 4

For the ones that uses yarn:

yarn remove node-sass
yarn add node-sass

if you want a specific node-sass version

yarn add [email protected]

Rox

Answer 5

Node Sass is also deprecated now so you can try uninstalling it by using this command

npm uninstall node-sass and trying:

npm install --save-dev sass

this worked for me when I was having issues installing sass on a project using create react app

Exscind

Answer 6

If you have problems with node-sass, you can use the sass library instead.

npm i sass

You can also install it as a developer dependency if you prefer, it's even better practice.

npm -D i sass

Heathenish

Answer 7

i uninstall node-sass and install dart-sass than my problem solved.it is about node-sass and sass-loader

Jurassic