Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
semihraifgurel opened this issue May 10, 2021 · 100 comments
Closed

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

semihraifgurel opened this issue May 10, 2021 · 100 comments

Comments

@semihraifgurel
Copy link

semihraifgurel commented May 10, 2021

  • 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
Copy link

leonardcser commented May 10, 2021

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
Copy link
Contributor

xzyfer commented May 10, 2021

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

@xzyfer xzyfer closed this as completed May 10, 2021
@camiblanch
Copy link

camiblanch commented May 12, 2021

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

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

@duc-gp
Copy link

duc-gp commented May 14, 2021

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
Copy link
Member

saper commented May 14, 2021

@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
Copy link

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

@luciomartinez
Copy link

@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
Copy link

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
Copy link

Edely commented May 23, 2021

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
Copy link

mdart86 commented May 23, 2021

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

@mdart86
Copy link

mdart86 commented May 23, 2021

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
Copy link

Edely commented May 23, 2021

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

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

@srmasharad
Copy link

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.

Screenshot_2

@IN25
Copy link

IN25 commented May 25, 2021

For anyone looking for how to fix:
Delete package-lock.json
Delete node_modules
in the terminal run npm install or yarn install

@fauziagustian
Copy link

For anyone looking for how to fix:
Delete package-lock.json
Delete node_modules
in the terminal run npm install or yarn install

i have same error , and do it your suggest, but its same when open app:
Node Sass version 6.0.0 is incompatible with ^4.0.0 || ^5.0.0.

@AustinB12
Copy link

For anyone looking for how to fix:
Delete package-lock.json
Delete node_modules
in the terminal run npm install or yarn install

I tried this as well and still got the same error. 😢

@shees-usman
Copy link

Running into the same issue. I can't install new dependencies until I update electron, once I updated electron during the install node-sass started crying out. Now stuck with the case where node-sass doesn't work. Keeps saying:

Error: Node Sass version 6.0.0 is incompatible with ^4.0.0.

@t-pyrope
Copy link

t-pyrope commented May 28, 2021

I installed the last version of sass-loader by npm install sass-loader@latest and reloaded the page and that solved the problem to me

@aminnoura
Copy link

I am using

"sass-loader": "^11.1.1",
"node-sass": "^6.0.0",

and still getting error:
Error: Node Sass version 6.0.0 is incompatible with ^4.0.0.

Already deleted node_modules and lock file and installed everything again.

@aminnoura
Copy link

Find a solution:

yarn add css-loader
yarn add react-script

updating css-loader and react-script fixed my issue.

@TorvaldsDB
Copy link

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.

thank you very much!

@okechukwu0127
Copy link

  • 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 %

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. or node sass version 5.0.0 is incompatible with ^4.0.0

SOLUTION THAT WORKED FOR ME

with npm =>
1.npm uninstall node-sass
2.npm install node-sass@4.14.1
with yarn =>
1.yarn remove node-sass
2.yarn remove node-sass@4.14.1

@Reomar
Copy link

Reomar commented Jun 1, 2021

with npm =>
1.npm uninstall node-sass
2.npm install node-sass@4.14.1
with yarn =>
1.yarn remove node-sass
2.yarn remove node-sass@4.14.1

  • yarn add node-sass@4.14.1

@tech-doctor
Copy link

with npm =>
1.npm uninstall node-sass
2.npm install node-sass@4.14.1
with yarn =>
1.yarn remove node-sass
2.yarn remove node-sass@4.14.1

  • yarn add node-sass@4.14.1

This is not working for me., i am using the latest version of node.

@daniel-flex
Copy link

This is not working for me., i am using the latest version of node.

only works when node-sass is a top-level dependency, but not when it's installed as a module dependency, i.e. Create React App.

@tech-doctor
Copy link

This is not working for me., i am using the latest version of node.

only works when node-sass is a top-level dependency, but not when it's installed as a module dependency, i.e. Create React App.

Thanks Daniel. I do used Create React App to run my react projects, I used node-sass v14 which was working well with my initial version of Node, after updating my node to v16 some days ago, the node-sass stopped working, I've tried updating the node-sass to the latest version(v16) but I'm still getting the error.

@davidkim10
Copy link

"devDependencies": {
    "node-sass": "^6.0.0",
    "sass-loader": "^12.0.0"
 }
  1. Add dev dependencies
  2. Delete package-lock.json or yarn.lock
  3. Delete node modules
  4. Run npm install or yarn install

@dsvgit
Copy link

dsvgit commented Oct 27, 2021

to fix it I had to remove node_modules and yarn.lock (not sure if it is ok for everyone)
then I add to my package.json node-sass dependency

"devDependencies": {
  "node-sass": "^6.0.0"
}

and run yarn install

not sure what exactly helped me
that's really weird behaviour

I'm using react-scripts@4.0.3 and it requires sass-loader@^10.0.5 and after above actions I have sass-loader@10.2.0 installed in my node_modules which is allow to use node-sass@6.0.0 because in peerDependecies of this version I see "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0"

@CarlosRangel17
Copy link

@dsvgit Thank you for your latest post!! I tried updating to the latest node-sass version ^6.0.1 with sass-loader ^11.1.1; however, I kept seeing this error reported in the thread. I went ahead and tried your exact versions node-sass: ^6.0.0 and sass-loader: 10.2.0 and it worked perfectly!

@PotLid
Copy link

PotLid commented Oct 31, 2021

yarn add --exact react-scripts@4.0.3
worked for me. Node v16

This solved my issue. Super!

@abhijitk7
Copy link

I was getting below error

node sass version 6.0.0 is incompatible with 4.0.0

performed below steps and it worked for me

with npm =>
1.npm uninstall node-sass
2.npm install node-sass@4.14.1

@wangmeijian
Copy link

delete yarn.lock
remove node_modules
yarn add node-sass@latest sass-loader@latest

@GreatDseven
Copy link

No se pudo instalar node-sass 4.14, en su lugar encontré que node-sass está en desuso, así que me muevo a dart-sass
correr
yarn remove node-sass
yarn add sass
npm uninstall node-sass
npm install sass

功能

功能

完美解决了我遇到的问题 感谢感谢

@hatamsoyunov
Copy link

hatamsoyunov commented Nov 11, 2021

to fix it I had to remove node_modules and yarn.lock (not sure if it is ok for everyone) then I add to my package.json node-sass dependency

"devDependencies": {
  "node-sass": "^6.0.0"
}

not sure what exactly helped me that's really weird behaviour

I'm using react-scripts@4.0.3 and it requires sass-loader@^10.0.5 and after above actions I have sass-loader@10.2.0 installed in my node_modules which is allow to use node-sass@6.0.0 because in peerDependecies of this version I see "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0"

For CRA it was enough to update react-scripts 🤯
Thank you so much!

@alejandro-fdez
Copy link

For anyone looking for how to fix: Delete package-lock.json Delete node_modules in the terminal run npm install or yarn install

This worked for me. Note that if you use yarn, the lock file is called "yarn.lock".

@parsadoc
Copy link

node-sass is a deprecated lib
remove it then use [dart-sass](https://www.npmjs.com/package/dart-sass) (it's renamed to [sass](https://www.npmjs.com/package/dart-sass))

yarn remove node-sass
or
npm uninstall node-sass

then

yard add sass --dev
or
npm i sass --dev

it worked for me.

@aramyesildeniz
Copy link

Thats the correct answer.
node-sass is deprecated, you have to switch to sass

@mateusloubach
Copy link

npm uninstall node-sass;

npm install node-sass@4.14.1

solution above was found here:
https://stackoverflow.com/questions/62304283/src-index-scss-node-modules-css-loader-dist-cjs-jsref-6-oneof-5-1-node

answer provided by: carmen romero

@omarrendon
Copy link

The easy solution I found in this video: https://www.youtube.com/watch?v=7uLl4XvFlFs

  1. npm uninstall node-sass
  2. npm install sass

This work for me!! Thanks.

@suliman-nm98
Copy link

Upgrade you sass loader and it should work smooth as butter!.

npm i sass-loader@latest

@ivanoffbg
Copy link

ivanoffbg commented Jan 13, 2022

When I tried to compile my project with "yarn hot or yarn watch" I had the same error.
I fixed it like this:

yarn remove sass-loader
yarn remove node-sass
and after that I delete "node_modules" directory + package.lock file..
then:

yarn add sass-loader@^7.0.1 node-sass --dev

after that, you can run your project without problem :)

@dembit
Copy link

dembit commented Jan 21, 2022

It helps me !!!

"node-sass": "^6.0.0",
"ssas-loader": "^10",

@scurrilus
Copy link

I had the same Issue. My solution was. Switch from node-sass to sass. After that it was not working. So i have also updated my old "react-scripts": "^3.4.1" to "react-scripts": "^5.0.0". And then magic, it works. I use this with node 16.8.

"sass": "^1.49.0", "sass-loader": "^10",

@Zhangyao719
Copy link

Zhangyao719 commented May 29, 2022

Try this one. This combination solves my problem.
My node version: v16.15.0
"devDependencies": { "node-sass": "^6.0.0", "sass-loader": "^10.2.0", }
Version 11 of sass-loader is too new for webpack4 to cause other problems: 'this.getOptions is not a function'.

@mr-chk
Copy link

mr-chk commented Jun 14, 2022

我在此视频中找到的简单解决方案: https ://www.youtube.com/watch?v=7uLl4XvFlFs

  1. npm 卸载 node-sass
  2. npm 安装 sass

有用的

@godwintrav
Copy link

The easy solution I found in this video: https://www.youtube.com/watch?v=7uLl4XvFlFs

  1. npm uninstall node-sass
  2. npm install sass

worked for me

@cmiltone
Copy link

Update react-scripts

@mohamedmehdigara
Copy link

Hello.

  1. npm uninstall node-sass
  2. npm install node-sass
  3. Change react-scripts version in package.json to 4.0.3
  4. npm install
  5. npm start

@thuyetsato
Copy link

yarn remove node-sass && yarn add sass
I'm using sass instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests