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

[semihraifgurel]

• NPM version (npm -v):
  7.12.0
• Node version (node -v):
  16.0.1
• Node Process (node -p process.versions):
  {
  node: '16.1.0',
  v8: '9.0.257.24-node.11',
  uv: '1.41.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.17.1',
  modules: '93',
  nghttp2: '1.42.0',
  napi: '8',
  llhttp: '6.0.1',
  openssl: '1.1.1k+quic',
  cldr: '39.0',
  icu: '69.1',
  tz: '2021a',
  unicode: '13.0',
  ngtcp2: '0.1.0-DEV',
  nghttp3: '0.1.0-DEV'
  }
• Node Platform (node -p process.platform):
  darwin
• Node architecture (node -p process.arch):
  x64
• node-sass version (node -p "require('node-sass').info"):
  node-sass 6.0.0 (Wrapper) [JavaScript]
  libsass 3.5.5 (Sass Compiler) [C/C++]
• npm node-sass versions (npm ls node-sass):
  theme-landing@0.1.0 /Users/semihraifgurel/GitHub.noindex/theme-landing
  ├── node-sass@6.0.0
  └─┬ react-scripts@4.0.3
  └─┬ sass-loader@10.1.1
  └── node-sass@6.0.0 deduped invalid

npm ERR! code ELSPROBLEMS
npm ERR! invalid: node-sass@6.0.0 /Users/semihraifgurel/GitHub.noindex/theme-landing/node_modules/node-sass

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/semihraifgurel/.npm/_logs/2021-05-10T07_38_04_899Z-debug.log
semihraifgurel@Semih-MacBook-Pro theme-landing %

[leonardcser]

Same issue here.

• NPM version:
  7.10.0

• Node version
  v16.0.0

• Node Process:
  {
  node: '16.0.0',
  v8: '9.0.257.17-node.10',
  uv: '1.41.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.17.1',
  modules: '93',
  nghttp2: '1.43.0',
  napi: '8',
  llhttp: '6.0.0',
  openssl: '1.1.1k',
  cldr: '39.0',
  icu: '69.1',
  tz: '2021a',
  unicode: '13.0'
  }

• Node Platform:
  darwin

• Node architecture:
  x64

• node-sass version:
  node-sass 6.0.0 (Wrapper) [JavaScript]
  libsass 3.5.5 (Sass Compiler) [C/C++]

• npm node-sass versions:
  frontend@0.1.0 /Users/leo/dev/Python/project/frontend
  ├── node-sass@6.0.0
  └─┬ react-scripts@4.0.3
  └─┬ sass-loader@10.1.1
  └── node-sass@6.0.0 deduped invalid

npm ERR! code ELSPROBLEMS
npm ERR! invalid: node-sass@6.0.0 /Users/leo/dev/Python/project/frontend/node_modules/node-sass

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/leo/.npm/_logs/2021-05-10T09_05_18_799Z-debug.log

• React Complie Log:
  Failed to compile.

./src/styles/_global.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/styles/_global.scss)
Node Sass version 6.0.0 is incompatible with ^4.0.0 || ^5.0.0.

[xzyfer]

sass-loader requires node-sass 4 or 5.
https://github.com/webpack-contrib/sass-loader/blob/master/package.json#L43

[camiblanch]

As of 2 days ago, sass-loader is compatible with node-sass 4, 5, or 6. webpack/sass-loader#947

You should be able to update sass-loader to get this compatibility

[duc-gp]

I dont have sass-loader as a dependency in my project (used a fresh create react app) and followed the steps on https://create-react-app.dev/docs/adding-a-sass-stylesheet/

and got this error

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

[saper]

@duc-talentwunder create-react-app adds sass-loader to webpack configuration so I believe this is the same problem

https://github.com/facebook/create-react-app/blob/fddce8a9e21bf68f37054586deb0c8636a45f50b/packages/react-scripts/config/webpack.config.js#L585

[tanapaydin]

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

[luciomartinez]

@duc-talentwunder create-react-app adds sass-loader to webpack configuration so I believe this is the same problem

https://github.com/facebook/create-react-app/blob/fddce8a9e21bf68f37054586deb0c8636a45f50b/packages/react-scripts/config/webpack.config.js#L585

That's correct. It's unfortunate that is not easy to upgrade it for react-scripts.

[scott-schibli]

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

For me "sass-loader" only goes to version "^8.0.2". Am I missing something here? Im implementing scss into a Create React App & Typescript build.

[Edely]

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

@tanapaydin is right, but I also had to erase the node_modules folder and the lock file to work.

[mdart86]

Hey @Edely - thank you, can I clarify, which node_modules folder?
I can't see a lock file here though

[mdart86]

For those of you who want a workaround... I have downgraded to Version 5... I will let you know if I encounter any major issues

[Edely]

Hey @Edely - thank you, can I clarify, which node_modules folder?
I can't see a lock file here though

@mdart86 In my case was the node_modules from the whole project, which usually stays at the root folder.

[srmasharad]

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

For me "sass-loader" only goes to version "^8.0.2". Am I missing something here? Im implementing scss into a Create React App & Typescript build.

I also tried the same thing but I still get the error
Node Sass version 6.0.0 is incompatible with ^4.0.0 || ^5.0.0.