So, I had used sass before using npm install node-sass for my reactjs project. I'm now working on a new project and wanted to use sass again. With the same syntax npm install node-sass to get it installed, I continued to get
./src/components/Main.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-scripts/node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/components/Main.scss)
Error: Node Sass version 8.0.0 is incompatible with ^4.0.0.
Or
to import sass files, you first need to install node-sass. run `npm install node-sass` or `yarn add node-sass` inside your workspace
...
...
I followed the instructions to have sass installed from the links npmjs
sass-lang
using these syntaxes
brew install sass/sass/sass
npm install -g sass
but I'm still encountering either errors I mentioned earlier.
I tried deleting the node-module folder, package-lock.json and reinstalled node-modules. That still did not fix the error. Also, I followed how others got around fixing Node Sass version 5.0.0||6.0.0|| 7.0.0 incompatibility issue but that did not fix mine.
I'm seeking help now.
Don't use node-sass anymore
You can easily fix it by the following.
npm uninstall node-sass
npm install sass
This is because node-sass is now deprecated. You will have to install its new version which is sass. Sinc it works all the same and better, this will easily fix the issue without making any additional changes.
And all Works well !
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)
update sass-loader, or remove and install again.
Try this: In your packege.json file, delete "node-sass": "^4.12.0" and replace it with "sass": "". This did it for me.
You can follow these two steps:
Uninstall your node-sass:
npm uninstall node-sass
Install old version node-sass:
npm install --save-dev --unsafe-perm node-sass#4.14.1
It's okay now
The answer for me was to update react-scripts to 4.0.3. I couldn't do the latest version of react-scripts because it still requires a bunch of hacks to make packages work that had polyfilled modules automatically loaded before.
Related
Error: Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
at module.exports (/Users/hhag/Desktop/test_gulp/node_modules/node-sass/lib/binding.js:13:13)
at Object.<anonymous> (/Users/hhag/Desktop/test_gulp/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (node:internal/modules/cjs/loader:1109:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
at Module.load (node:internal/modules/cjs/loader:989:32)
at Function.Module._load (node:internal/modules/cjs/loader:829:14)
at Module.require (node:internal/modules/cjs/loader:1013:19)
at require (node:internal/modules/cjs/helpers:93:18)
at Object.<anonymous> (/Users/hhag/Desktop/test_gulp/node_modules/gulp-sass/index.js:166:21)
at Module._compile (node:internal/modules/cjs/loader:1109:14)
this error occures when I start to use gulp. is there a solution for using gulp-sass with apple m1? thanks
I also had issues installing node-sass on M1, and ended up using the opportunity to replace it with sass, as recommended on the LibSass deprecation notice.
https://sass-lang.com/blog/libsass-is-deprecated
If you’re a user of Node Sass, migrating to Dart Sass is straightforward: just replace node-sass in your package.json file with sass. Both packages expose the same JavaScript API.
As mentioned by #Ti Hausmann you can try with:
npm uninstall node-sass
npm install --save-dev sass
The replacement was completely smooth, it worked on M1, and I couldn't notice any performance impact locally or on the CI.
For npm > 6.9 you can switch your dependency to dart-sass/sass with just one line and from there just use sass as you would before.
npm install node-sass#npm:sass
I think, you are using an M1 Mac. And node-sass currently doesn't support it natively. See: https://github.com/sass/node-sass/issues/3033
For now you can set target arch for running it through Rosetta with:
rm -rf node_modules
npm install --target_arch=x64
I ran into the same error when developing a Vue.js project with node-sass.
I worked around this issue by downgrading to Node version 14.
I’ve done this with n, a Node’s version manager application. See this answer: https://stackoverflow.com/a/50287454.
Check which node version you’re using
$ node -v
v16.3.0
Install n
$ npm install -g n
Get list of available Node versions you can install
$ n ls-remote --all
16.3.0
16.2.0
..
15.14.0
15.13.0
..
14.17.0
14.16.1
..
Install Node version 14
$ sudo n install 14
Just adding for completeness of the answer, that I came across this issue when using the serverless framework (https://www.serverless.com/).
I was receiving a node gyp build error using both Node 16 and 17.
Using nvm I installed node version 14 and this solved my issue.
The steps to fix were:
nvm install v14
nvm use 14
Then I was able to do a yarn command which installed and built correctly.
Here is the official recomendation per gulp-sass Issue #803 - Apple M1 Chip Support
Switch to the sass compiler: Instructions
TL;DR:
Install version 5 of node-sass that does not include a default Sass compiler:
npm install sass gulp-sass --save-dev
or, Yarn
yarn add sass gulp-sass --save-dev
Explicitly set your compiler in your gulpfile:
const sass = require('gulp-sass')(require('sass'));
or, for ES6 modules
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
yarn add sass or npm install sass
replace "node-sass": with "sass": in package.json
rm -rf node_modules && npm install
Worked for me on my M1 MBP.
Reinstall node to version 14 by downloading from here
https://nodejs.org/dist/v14.0.0/
in your project folder run npm rebuild node-sass
Switching to Sass works just great in m1. As pointed in the top answers. And we should always be using sass in place of node-sass now as it's deprecated.
Here I want to point to one case that some may fall in. That if it's the case I think that would save you some time.
Case
You go and remove node-sass through npm uninstall or even by doing npm install node-sass#npm:sass as pointed in the second answer. You removed node-modules and package-lock.json.And still having the same problem and somehow node-sass is getting compiled.
Not working even after trying to install sass?
If so the case. Make sure to check your dependencies versions. A good chance some of them depends on node-sass on there old versions.
Ex:
"sass-loader": "^8.0.2",
"styles-loader": "^1.0.2"
update the version to latest =>
"sass-loader": "^12.4.0",
"styles-loader": "^3.0.0"
That should do it. And make sure to check all the dependencies that can depend on node-sass and update them.
If for some reason that still is a problem. You can try adding
"optionalDependencies": {
"node-sass": "*"
}
to package.json. I don't think it's necessary though.
This command worked for me,
npm uninstall node-sass -g && npm cache clean -force && npm install node-sass
I have struggle lot with issue my my brand new macOS Monterey M1 Chip Macbook Pro. None of solutions work except It's fix when I have set target arch for NPM installation using below command.
npm install --target_arch=x64
I installed SASS on my Mac, but wish uninstall it so I can install the old Ruby version which I had on my previous Mac. There seems to be continuing issues where it effectively crashes / stops working out of the blue, which I never experienced on the Ruby version.
I can't see anywhere in the Docs how to uninstall it?
I used npm install -g sass to install it on my current machine - but I don't know whether this is a Dart or JS version of SASS ?
Thanks in advance for any help.
If you have installed the SASS using npm install -g sass then you can remove it using
npm uninstall -g sass
That would remove the js version of sass. In case you still face error's then you can remove your dart version using
choco uninstall sass -prerelease
Hope this works for you.
As stated in NPM Docs, you just need to run npm uninstall -g sass.
As for your other question, the NPM package is Dart Sass as stated on its NPM page. It also has a section with the differences from Ruby Sass so that is something you might be interested in.
Also, I recommend you install the Dart Sass version from Homebrew as Ruby Sass is at EOL. You can run brew install sass/sass/sass to do that. Again, refer to the differences from Ruby Sass in the link above to make sure your sass is compliant.
My system already has webpack version 4.27.5, but I need to uninstall this version and then use an older version 4.19.1, instead. I'm using Ubuntu.
I've run the command:
npm uninstall <web package>
but my issue was not resolved.
I recommend you to create a .npmrc file and add it
save-exact=true
This will prevent you from get packages like "^4.19.1", which AFAIK this means, get any package above 4.19.1
and then just install the needed package using the following command
npm install webpack#4.19.1 --save-dev
I'm building my CI on gitlab and one of the jobs I need to execute is to compile sass stylesheets.
In order to compile sass I'm using node-sass which when installed needs to be compiled from source.
In order NOT to compile every time node-sass from source, I created a docker image with:
node and npm
node-sass installed globally (npm install --unsafe-perm -g node-sass)
In my project's package.json I kept node-sass devDependencies with the very same version of the one installed in the docker image described above.
My problem is that when I execute npm install (right before compiling my scss), npm tries to install node-sass again and goes through the whole compilation from source process.
How can avoid this?
One solution I thought, is to remove node-sass from the devDependencies and just add them as optionalDependencies or something, but I don't like this dirty solution.
Does anyone even know why npm tries to install node-sass anyway even though the version requested by package.json it is globally installed?
I solved by adding node-sass to package.json as optional dependency like so:
"optionalDependencies": {
"node-sass": "4.10.0"
},
and now, whenever I need to skip the installation because I know there is a global version installed, I just do:
npm install --no-optional
This is kind of a work around nut it works great.
After updated Node (upto v8.6.0) and npm (upto v5.5.1) I cannot execute command npm install.
After npm install I've error message:
npm ERR! Cannot read property '0' of undefined
What's trouble or I need downgrade node/npm ?
I had the same problem.
I removed both node_modules and package-lock.json and then did:
npm install
And it worked.
Edit by #OwlyMoly
Due to new updates and the restriction to old dependencies in package-lock.json is causing this conflicts. By doing npm install won't fix this issue. Instead by ditching npm_modules and package-lock.json and doing npm install will load a new node_modules and that supposed to be required by package.json. You have to commit the new package-lock.json along with your latest changes of the project.
Do 2 steps bellow (Window):
rm -rf ./node_modules to remove node folder
rm package-lock.json to remove package-lock.json file
then npm install to re-install the node modules
Just download and install latest Yarn which is also a node package manager, developed by facebook, but has a much better dependency management. Also update your node cli (optional).
And then, install your dependencies using yarn:
yarn install
or
yarn // short version of yarn install
No errors!
You can continue to use npm after you have installed all dependencies with yarn or continue with yarn....it's your choice.
I've made some tests:
nodejs#8.6.0 npm#5.5.1 - I have trouble and the test fails
nvm use 8.5.0
nodejs#8.5.0 npm#5.5.1 - I have trouble and the test fails
nvm use 8.4.0
nodejs#8.4.0 npm#5.5.1 - I have trouble and the test fails
npm install npm#^5 -g
nodejs#8.4.0 npm#5.4.2 - I have trouble and the test fails
nvm use 8.6.0
npm install npm#^4 -g
nodejs#8.6.0 npm#4.6.1 - no trouble, this fixes it.
Seems to be an issue with a combination of factors.
Some workarounds here:
https://github.com/npm/npm/issues/18238
npm 5.3.0 is broken for windows 10 after upgrading the nodeJS.
You should downgrade the npm, it is a temporary solution but works fine.
npm install -g npm#5.2.0
For me (npm#6.9.0) solved the issue by deleting node_modules and performing npm install, but without removing package.json.lock file.
Just remove both node_modules and package-lock.json and run: npm install
or
Just run: npm install -g npm#latest to upgrade it to the latest version
Try with nvm(Node Version Manager).it help you to install any node version for any project without any Error.
I found same problem when using npm version 5.5.1 to install babel-preset-stage-0
Solution:
I downgraded npm to version 5.2.0 and try to install again then it can solve the issue.
npm i -g npm#5.2.0
npm i -D babel-preset-stage-0
I bumped into this issue using nvs (Node Version Switcher - https://github.com/jasongin/nvs) node#10.15.3 and npm#6.9.0. The reason was a local package I had linked with npm link. The solution was to remove that folder.
In my case reinstalling node_modules have not fixed this issue.
Problem was with one *.ts file which was missing in source codes.
Do not know why It was not displaying compilation error, but adding this missing file to repository solved this issue.
Upgrading npm to version 7.5.4 did the job for me.
npm install -g npm#latest
What worked for me:
npm ci
Install a project with a clean slate
docs: https://docs.npmjs.com/cli/v7/commands/npm-ci
Deletes node_modules and installs everything based on package-lock.json, so no need to regenerate that