Node Sass with apple m1, Big Sur and arm64

Question

 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

Almonry

Answer 1

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.

Rowe

Thanks, this worked. I did npm uninstall node-sass, npm install --save-dev sass. – Brundisium

see an answer below from m_kos. it seems more sensible to just change dependencies in node-sass – Fiddling

Answer 2

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

Squadron

I believe this is the correct answer, non of the others above helped – View

tnx bro, it worked for me – Storer

Node v 16.13.0 and NPM v 8.1.4 here; worked like a charm 👍 – Selfliquidating

This command gave me dependency tree errors, but a simple npm i sass worked. – Brundisium

yarn add sass worked for me. – Krebs

This works for now, but I am not sure how it will behave once its in a Source Control system like git and peers who might be working on other machines, since lock file needs to be committed as well ! – Brobdingnagian

This worked on node v14.20.1, npm v6.14.16 without any further errors. – Marcasite

Thanks @Squadron ! This worked perfect – Maltose

Answer 3

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

Cyndi

Hi, Murart Corlu It does work on local machine when i tries to build Image using Dockerfile it fails to install packages. Any help would be appreciated – Opine

Am facing same issue using dockerfile. Can you please share your solution if you were able to resolve it – Mancino

is there any workaround for docker @Opine – Paprika

@KapilGupta are you able to resolve this issue somehow? – Paprika

This solutions works, you need to run all commands on i386, using arch -x86_64 zsh, then remove all node_modules, uninstall node, install node and npm modules again (make sure that arch prints i386) – Flotage

Answer 4

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

Lifeline

+1, Bear in mind if one had a previous installation of node using brew, one will have to uninstall the brew's node with brew uninstall node so the n node version takes effect – Monostrophe

I don't want to downgrade node version, is there no other way to fix this? – Tallbot

Answer 5

1. Reinstall node to version 14 by downloading from here https://nodejs.org/dist/v14.0.0/
2. in your project folder run npm rebuild node-sass

Unwashed

This is the answer that saved me thousand hours. Just downgrade to node 14 and problem is solved. – Huskey

This was the only thing that worked for me after trying for ages! – Vitriform

Answer 6

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:

1. nvm install v14
2. nvm use 14

Then I was able to do a yarn command which installed and built correctly.

Ambsace

After downgrading from node 17 to node 14 solved my issue. – Sliver

Answer 7

1. yarn add sass or npm install sass
2. replace "node-sass": with "sass": in package.json
3. rm -rf node_modules && npm install

---

Worked for me on my M1 MBP.

Fils

Answer 8

Here is the official recomendation per gulp-sass Issue #803 - Apple M1 Chip Support

Switch to the sass compiler: Instructions

TL;DR:

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

2. 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);

Traynor

Answer 9

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.

Cockcrow

Answer 10

This command worked for me,

npm uninstall node-sass -g && npm cache clean -force && npm install node-sass

Faradize

Answer 11

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

Pellagra

Answer 12

The only command that worked for me was:

npm rebuild node-sass

Aposematic

Answer 13

Yarn:

yarn remove node-sass
yarn add node-sass --dev

Lava

Answer 14

Use this guide - https://github.com/dlmanning/gulp-sass#setting-a-sass-compiler. It helped me a lot. Just make sure in the end that gulp-sass version is greater than 5.

Bombast

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Jorgan