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

Question

I used Node.js v16.13.1 and created a React application. I tried to use Sass, but when I tried to run it, I got this error:

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

So? What's your question? Looks like Node Sass version 7.0.0 is incompatible with the node version you're running — Dominik, Dec 08 '21 at 21:14
i get the same error if I am on Node 16. It complains 7.0.0 is not compatible with 4.0.0. But I am not running 4!!!! I am running 16!!!! — Oliver Watkins, Dec 19 '21 at 00:44
@OliverWatkins It is npm version. Not node version. You can check nmp version with npm -v — Mahdiyeh, Jan 19 '22 at 16:05
Which version of react-scripts are you using? This could be a dependency issue and nothing to do with the node version. — Mick, Feb 09 '22 at 13:01

score 295 · Answer 1 · edited Jul 14 '22 at 15:49

295

If you want to use SCSS and Sass in your React app, try to do as below and your files will be correctly compiled:

First remove node-sass:

yarn remove node-sass
# if you use npm
npm uninstall node-sass

Then install sass instead of node-sass:

yarn add -D sass
# if you use npm
npm i -D sass

edited Jul 14 '22 at 15:49

Youssouf Oumar

29,373
11
46
65

answered Dec 09 '21 at 16:37

superdunck

3,088
1
3
22

4

I'm using the same version of node, and create-react-app but I'm still getting an error like: To import Sass files, you first need to install node-sass. Run `npm install node-sass` or `yarn add node-sass` inside your workspace. – Austin B Dec 14 '21 at 18:46
1

Great solution. It is also mentioned here in the docs now I see: https://create-react-app.dev/docs/adding-a-sass-stylesheet – Royal Dec 20 '21 at 09:16
This solution works for me, but after removing the node_modules and package-lock.json file and finally running `npm install` . – Medisa Jan 08 '22 at 06:03
2

Just to add then some use might need to update webpack.config.js file ` "css-loader", { loader: "sass-loader", options: { implementation: require("sass") } }` – paraS elixiR Jan 11 '22 at 20:52
1

what is `-D` means in here? – Rakis Friski Apr 13 '22 at 07:13
3

@RakisFriski -D is a shortcut for --save-dev and adds the dependency in "devDependencies" – KeatsPeeks Jul 14 '22 at 00:49

Abraham · Answer 2 · 2022-12-19T15:53:20.523

141

Don't use node-sass anymore

node-sass is deprecated. Instead use sass. You can uninstall the old and install the new one:

npm uninstall node-sass
npm install sass

But if you still prefer to use `node-sass`

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

npm install node-sass@(your version)

edited Dec 19 '22 at 15:53

answered Dec 20 '21 at 22:05

Abraham

12,140
4
56
92

2

This solution worked for me. should be accepted as the answer. node-sass deprecated in the new version of Node – Khaled Rakhisi Feb 25 '22 at 19:25
I did this first actually because my other project works well with just sass but when I created a new project using typescript template, im now getting the op's error. Any advice? – JkAlombro Jul 02 '22 at 05:31
@JkAlombro You may need to check the node version using `node --version` and install a specific version based on the table. It's only on version mismatch that the op's error occurs – Abraham Jul 15 '22 at 09:49

score 19 · Answer 3 · edited Aug 19 '22 at 11:55

19

You can just switch to Sass in your package.json file, like so:

 "node-sass": "npm:sass@^1.49.9",

This way, React still asks for node-sass after removing it and replacing with sass, so you can alias it like this and now React will use Sass.

edited Aug 19 '22 at 11:55

Peter Mortensen

30,738
21
105
131

answered Mar 29 '22 at 16:17

Mark O

927
9
13

2

Wow, great solution, thanks!, many components use deprecated dependency to node-sass, It is the better clean solution. – Slinker009 May 14 '22 at 19:07
this fixed it on node 16.17.0 react@18.2.0 and react-scripts@2.1.3 for me. Thank you – CosminO Sep 11 '22 at 20:49
2

out of all the options, this is the only one that works, thank you – Uriel Cisneros Sep 14 '22 at 19:30
1

After spending upwards of 6 hrs installing and re-installing node-sass/sass, this is the only thing that worked. Thanks a ton!! – Amrita Yadav Sep 21 '22 at 06:00
Yep thanks a lot it saved my problems too ! – AOUADI Slim Oct 24 '22 at 22:18

score 17 · Answer 4 · edited Aug 19 '22 at 11:50

17

I had the same problem with sass, and I ran these commands like below, but none of them worked.

npm uninstall node-sass
npm install sass

So finally I took a look at my package.json and I saw that I installed sass-loader, so I uninstalled and installed that and the problem was fixed. You can use the commands below for that:

npm uninstall sass-loader
npm install sass-loader

edited Aug 19 '22 at 11:50

Peter Mortensen

30,738
21
105
131

answered Feb 27 '22 at 06:51

erfanmashari

311
3
7

yes the loader is the problem, when you remove the node-sass to switch to the sass you must remove the loader of the node-sass too, otherwise it will give you problem forever – Astro May 09 '22 at 22:27

score 11 · Answer 5 · edited Jul 14 '22 at 20:05

11

I figured out this issue using node-sass version 4.14.1 with the following commands:

With npm

npm uninstall node-sass
npm install node-sass@4.14.1

With yarn

yarn remove node-sass
yarn add node-sass@4.14.1

edited Jul 14 '22 at 20:05

Youssouf Oumar

29,373
11
46
65

answered Dec 16 '21 at 15:45

Marco Valeri

401
3
5

1

but why node-sass 4.14.1 when node is version 16? I am so confused. – Oliver Watkins Dec 19 '21 at 00:45
2

Hi Oliver, it is not the version of node, it is the version of the npm package node-sass – Marco Valeri Dec 20 '21 at 06:38

score 11 · Answer 6 · edited Aug 19 '22 at 12:01

11

Just remove the node-sass and install sass instead:

delete the node_modules directory.
run yarn remove node-sass
run yarn add sass

Or with npm

delete node_modules directory.
run npm uninstall --save node-sass
run npm install --save sass

edited Aug 19 '22 at 12:01

Peter Mortensen

30,738
21
105
131

answered Apr 20 '22 at 14:59

MSKashef

344
2
11

score 7 · Answer 7 · edited Aug 19 '22 at 12:02

7

There is a lot of misinformation in the replies to this question and it's the first thing to shows up in Google:

If you see this problem in your application, the culprit is not the node-sass or Node.js version. It's the sass-loader issue and that's the library you need to upgrade since older versions are not compatible with the newer node-sass.

edited Aug 19 '22 at 12:02

Peter Mortensen

30,738
21
105
131

answered May 02 '22 at 11:14

d4rky

469
6
13

Is there only one sass-loader issue? If so, what does it refer to? – Peter Mortensen Aug 19 '22 at 12:04

score 5 · Answer 8 · edited Jan 09 '22 at 00:45

5

You can simply do npm install node-sass@6.0.

This is because Node.js 16 is compatible with node-sass version 6.0.

edited Jan 09 '22 at 00:45

Peter Mortensen

30,738
21
105
131

answered Dec 21 '21 at 18:25

Abraham

12,140
4
56
92

score 3 · Answer 9 · edited Aug 19 '22 at 11:46

I got the same issue. At the time of installing 'node-sass', my Node.js version was 15.

After downgrading to Node.js version 12 and installing the version 12-related 'node-sass', it worked fine.

node -v

# Output: v15.2.0

nvm use 12.18.3

Now using Node.js v12.18.3 (npm v6.14.6)

node -v

# Output: v12.8.3

npm install node-sass@4.14.1

To make sure it's working properly, add some abc.sass file. And write styles and import it in the component.

score 0 · Answer 10 · edited Jan 09 '22 at 01:06

Based on input and the following steps, I got it working for shopware6 while build-administration.sh where a similar error occurred:

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

ERROR in ./src/app/component/base/sw-button/sw-button.scss (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ref--15-2!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/app/component/base/sw-button/sw-button.sc)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.
    at getRenderFuncFromSassImpl (/var/ww

Checking the currently installed node-sass version and uninstalling and installing the "lower" version:

npx node-sass -v results in:
node-sass: 7.0.1
libsass 3.5.5

npm uninstall node-sass
npm install node-sass@4.14.1

npx node-sass -v results in:
node-sass       4.14.1  (Wrapper)       [JavaScript]
libsass         3.5.5   (Sass Compiler) [C/C++]

Before that, I checked the mentioned version numbers in a complete htdocs folder:

.../htdocs$ find . -iname '*package.json*'  | xargs  grep node-sass {}

In the resulting (huge) list, the following node-sass versions are found:

....nistration/Resources/app/administration/node_modules/node-sass/package.json:    "lint": "eslint bin/node-sass lib scripts test",
./vendor/shopware/administration/Resources/app/administration/node_modules/sass-loader/package.json:    "node-sass": "^4.5.0",
grep: {}: Datei oder Verzeichnis nicht gefunden
./vendor/shopware/administration/Resources/app/administration/node_modules/stylelint-webpack-plugin/package.json:    "node-sass",
./vendor/shopware/administration/Resources/app/administration/build/nuxt-component-library/package.json:        "node-sass": "4.12.0",
./vendor/shopware/administration/Resources/app/administration/package.json:    "node-sass": "^7.0.1",    <<<<<< THIS ONE !!
./vendor/shopware/administration/Resources/app/administration/package.jsonORIG-2021-12-29:    "node-sass": "^7.0.1",

After uninstalling and install node-sass@4.14.1 and changing the marked line from

"node-sass": "^7.0.1",

to

"node-sass": "^4.0.1",

it compiled and build-administration.sh (a shopware6 thing...) succeeded.

Time: 58913ms
Entrypoint commons = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/js/commons.js
Entrypoint app = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/app.css static/js/app.js
Entrypoint storefront = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/storefront.css static/js/storefront.js
Entrypoint payone-payment = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/payone-payment.css static/js/payone-payment.js
Entrypoint wbm-tag-manager-ecomm = static/js/runtime.js static/css/vendors-node.css static/js/vendors-node.js static/js/vendors-node.js.map static/css/wbm-tag-manager-ecomm.css static/js/wbm-tag-manager-ecomm.js
   3909 modules
build-administration.sh: 14: build-administration.sh: [[: not found
Copying files for bundle: FrameworkBundle
Copying files for bundle: MonologBundle
Copying files for bundle: SwiftmailerBundle
Copying files for bundle: SensioFrameworkExtraBundle
Copying files for bundle: TwigBundle
Copying files for bundle: EnqueueBundle
Copying files for bundle: EnqueueAdapterBundle
Copying files for bundle: Framework
Copying files for bundle: System
Copying files for bundle: Content
Copying files for bundle: Checkout
Copying files for bundle: Administration
Copying files for bundle: Storefront
Copying files for bundle: Elasticsearch
Copying files for bundle: SwagPlatformDemoData
Copying files for bundle: Netzp6AddressValidator
Copying files for bundle: PayonePayment
Copying files for bundle: WbmTagManagerEcomm
Copying files for bundle: DbalKernelPluginLoader


 [OK] Successfully copied all bundle files

score 0 · Answer 11 · answered Nov 03 '22 at 08:49

0

In my case #first uninstalled using npm npm uninstall node-sass Then install #using npm npm i -D sass

answered Nov 03 '22 at 08:49

Umer Baba

285
3
4

score 0 · Answer 12 · answered Mar 09 '23 at 12:54

0

Removing yarn.lock and regenerating it solved the issue for me.

answered Mar 09 '23 at 12:54

rebinnaf

276
2
9

score -2 · Answer 13 · edited Jan 09 '22 at 00:50

-2

I got this error two months back. I tried each and every solution I can probably find.

Check whether you have created multiple React projects on the desktop. I did the same and started facing this issue. Combine all of them inside a single folder to get rid of the error. It worked for me. Please try this if you are making the same mistake.

edited Jan 09 '22 at 00:50

Peter Mortensen

30,738
21
105
131

answered Dec 29 '21 at 12:21

Nishant Bage

5
2

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

13 Answers13

Don't use node-sass anymore

But if you still prefer to use `node-sass`

Linked

Related

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

13 Answers13

Don't use node-sass anymore

But if you still prefer to use node-sass

Linked

Related

But if you still prefer to use `node-sass`