Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
node.jsReactjsSassnode.js Problem Overview
I'm using Node.js 16.13.1 and created a React application and try used Sass, but when I try to run it, I get this error:
> Node Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
node.js Solutions
Solution 1 - node.js
If you want to use SCSS and Sass in your React app, try to do this:
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
or
npm i -D sass
Finally your SCSS and Sass files will be correctly compiled!
Solution 2 - node.js
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 prefer to use node-sass
You can use the following table to install the appropriate version node-sass for your installed node version which you can check by the command node --version
npm install node-sass@(your version)
Solution 3 - node.js
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
Solution 4 - node.js
i had the same problem with sass and i run this commands like below but none of them works.
npm uninstall node-sass
npm install sass
so finally i take a look at my package.json and i saw that i installed sass-loader so i'm uninstall and install that and the problem is fixed. you can use commands below for that.
npm uninstall sass-loader
npm install sass-loader
Solution 5 - node.js
You can simply do npm install [email protected].
This is because Node.js 16 is compatible with node-sass version 6.0.
Solution 6 - node.js
Just remove the node-sass and install sass instead.
- delete 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
Solution 7 - node.js
I got the same issue. At the time of installing 'node-sass', my Node.js version is 15.
After downgrading node version node-12 and installed node-12 related 'node-sass' it's worked fine.
node -v
# Output: v15.2.0
nvm use 12.18.3
Now using node 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 on the component.
Solution 8 - node.js
You can just switch to sass
in your package.json
"node-sass": "npm:sass@^1.49.9",
explanation
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
Solution 9 - node.js
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.
Solution 10 - node.js
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
Solution 11 - node.js
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.