163

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

5
  • So? What's your question? Looks like Node Sass version 7.0.0 is incompatible with the node version you're running
    – Dominik
    Commented Dec 8, 2021 at 21:14
  • Yes, you right @Dominik, I only change by sass. Commented Dec 14, 2021 at 9:10
  • 3
    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!!!! Commented Dec 19, 2021 at 0:44
  • @OliverWatkins It is npm version. Not node version. You can check nmp version with npm -v
    – Mahdiyeh
    Commented Jan 19, 2022 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
    Commented Feb 9, 2022 at 13:01

13 Answers 13

299

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

  1. First remove node-sass:
yarn remove node-sass
# if you use npm
npm uninstall node-sass
  1. Then install sass instead of node-sass:
yarn add -D sass
# if you use npm
npm i -D sass
6
  • 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
    Commented Dec 14, 2021 at 18:46
  • 1
    Great solution. It is also mentioned here in the docs now I see: create-react-app.dev/docs/adding-a-sass-stylesheet
    – Royal
    Commented Dec 20, 2021 at 9:16
  • 2
    Just to add then some use might need to update webpack.config.js file ` "css-loader", { loader: "sass-loader", options: { implementation: require("sass") } }` Commented Jan 11, 2022 at 20:52
  • 1
    what is -D means in here? Commented Apr 13, 2022 at 7:13
  • 3
    @RakisFriski -D is a shortcut for --save-dev and adds the dependency in "devDependencies"
    – KeatsPeeks
    Commented Jul 14, 2022 at 0:49
147

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)

versions

4
  • 2
    This solution worked for me. should be accepted as the answer. node-sass deprecated in the new version of Node Commented Feb 25, 2022 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
    Commented Jul 2, 2022 at 5: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
    Commented Jul 15, 2022 at 9:49
  • Please, post the URL of where you got this table from. Commented Aug 26 at 19:46
20

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.

4
  • 2
    Wow, great solution, thanks!, many components use deprecated dependency to node-sass, It is the better clean solution.
    – Slinker009
    Commented May 14, 2022 at 19:07
  • this fixed it on node 16.17.0 [email protected] and [email protected] for me. Thank you
    – CosminO
    Commented Sep 11, 2022 at 20:49
  • 2
    out of all the options, this is the only one that works, thank you Commented Sep 14, 2022 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!! Commented Sep 21, 2022 at 6:00
18

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
1
  • 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
    Commented May 9, 2022 at 22:27
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 [email protected]
  • With yarn
yarn remove node-sass
yarn add [email protected]
2
  • 1
    but why node-sass 4.14.1 when node is version 16? I am so confused. Commented Dec 19, 2021 at 0:45
  • 2
    Hi Oliver, it is not the version of node, it is the version of the npm package node-sass Commented Dec 20, 2021 at 6:38
11

Just remove the node-sass and install sass instead:

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

Or with npm

  1. delete node_modules directory.
  2. run npm uninstall --save node-sass
  3. run npm install --save sass
8

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.

1
  • Is there only one sass-loader issue? If so, what does it refer to? Commented Aug 19, 2022 at 12:04
5

You can simply do npm install [email protected].

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

3

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 [email protected]

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

0

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 [email protected]

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 [email protected] 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
0

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

0

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

-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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.