Try to fix this error "Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0."

Question

I installed the latest version of node-sass in my react app but I got this error

"./src/index.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/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/index.scss)
Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0."

My Json file :

{
  "name": "new-project-to",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cra-template": "1.1.2",
    "node-sass": "^6.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },

I've checked some solutions on StackOverflow like npm install [email protected] but it didn't work?

What do you think guys?

Answer 1

Can you try editing the package.json to read

"dependencies": {
  "node-sass": "^5.0.0",
  ...
},
...

and then run npm i

Hope that helps, but it may not if Armuth's solution didn't work...

Answer 2

Update your sass-loader like this: npm i sass-loader@latest