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

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?

CodePudding user response：

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.