Node Sass version 7.0.1 is incompatible with ^4.0.0 in React in Mac

user_1074881 0
Viewed 1648

I think I am using appropriate node/npm/node-sass versions but still I get this error - "Node Sass version 7.0.1 is incompatible with ^4.0.0" while running npm start comment. I am not sure what is this 4.0.0 version. it is not in any of my version given below.

Below are installed versions

Node version - 16.15.0
NPM version - 8.11.0
Node Sass version - 7.0.1

Below is package.json

{
  "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "http-proxy-middleware": "^1.0.6",
    "node-sass": "^7.0.1",
    "normalize-scss": "^7.0.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "sass": "^1.52.1"
  }
}

Can anyone guess what is causing incompatible issue?

npm reactjs node.js sass
2 Answers

It's your version of sass-loader which is incompatible. You can see the version you are using by going to:

node_modules > sass-loader > package.json

And then read what is written next to "version".

Your project uses CRA, it means that it's react-scripts which deals with sass-loader. Updating your version of react-scripts should solve the problem.

Since you are using an old version, I recommend that you do the update progressively. You can start with the v3.0.0 then v4.0.0 and finally v5.0.0.

Don't forget to read the breaking changes for each release, as they may break other parts of your code.

You also need to know that Node Sass is deprecated and you should try to use Dart Sass instead.

user_97180560

Don't use node-sass anymore

node-sass has been deprecated. Use use sass instead.

You can uninstall the old it and only use sass with this commands

npm uninstall node-sass

npm install sass


But if you want to use node-sass anyways

You can use the following table to install the appropriate version node-sass for your installed node version which you can check by the command node --version

npm install node-sass@(your version)

Enter image description here

user_144870320
Related