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

score 117 · Answer 1 · edited Aug 08 '22 at 08:17

117

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.

edited Aug 08 '22 at 08:17

blackgreen

34,072
23
111
129

answered Jul 12 '21 at 19:22

Danilo Moret

1,580
1
10
10

18

Thanks, this worked. I did `npm uninstall node-sass`, `npm install --save-dev sass`. – Ti Hausmann Dec 17 '21 at 12:49
see an answer below from m_kos. it seems more sensible to just change dependencies in node-sass – baszak Sep 12 '22 at 12:41

m_kos · Answer 2 · 2021-09-25T09:29:45.947

86

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

edited Sep 25 '21 at 09:29

answered Sep 24 '21 at 13:40

m_kos

1,609
1
9
7

6

I believe this is the correct answer, non of the others above helped – mcmxc Oct 28 '21 at 13:33
1

tnx bro, it worked for me – Mehrad Farahnak Dec 10 '21 at 12:21
Node v 16.13.0 and NPM v 8.1.4 here; worked like a charm – Braden Dec 12 '21 at 18:54
This command gave me dependency tree errors, but a simple `npm i sass` worked. – Ti Hausmann Dec 17 '21 at 13:08
2

`yarn add sass` worked for me. – geoidesic Dec 19 '21 at 17:53
1

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 ! – Vikram K Mar 24 '22 at 14:49
This worked on node v14.20.1, npm v6.14.16 without any further errors. – SoundStage Apr 13 '23 at 09:01

score 33 · Answer 3 · answered Jun 24 '21 at 08:00

33

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

answered Jun 24 '21 at 08:00

Murat Çorlu

8,207
5
53
78

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 – khizer Oct 07 '21 at 08:13
1

Am facing same issue using dockerfile. Can you please share your solution if you were able to resolve it – Kapil Gupta Oct 13 '21 at 04:57
is there any workaround for docker @khizer – Hafiz Siddiq Dec 16 '21 at 18:12
@KapilGupta are you able to resolve this issue somehow? – Hafiz Siddiq Dec 16 '21 at 18:12
1

Brilliant Catch Thanks Murart – Himanshu Patel Sep 28 '22 at 09:05

Sebastian Hagens · Answer 4 · 2021-10-28T20:54:29.513

19

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

edited Oct 28 '21 at 20:54

answered Sep 16 '21 at 12:21

Sebastian Hagens

891
1
7
11

2

+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 – yeyo Feb 21 '22 at 17:28
I don't want to downgrade node version, is there no other way to fix this? – Bilal Hussain Aug 26 '22 at 07:16

score 6 · Answer 5 · answered Jan 06 '22 at 23:06

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:

nvm install v14
nvm use 14

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

answered Jan 06 '22 at 23:06

Andre DiCioccio

1,191
1
8
10

2

After downgrading from node 17 to node 14 solved my issue. – Umesh Naik Jan 11 '22 at 06:04

Vlad R · Answer 6 · 2022-03-29T10:11:19.167

5

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.

edited Mar 29 '22 at 10:11

answered Mar 29 '22 at 10:05

Vlad R

1,851
15
13

score 4 · Answer 7 · answered Dec 22 '21 at 17:34

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

score 3 · Answer 8 · answered Nov 18 '21 at 17:47

3

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

answered Nov 18 '21 at 17:47

Nik B

617
6
11

1

This is the answer that saved me thousand hours. Just downgrade to node 14 and problem is solved. – MDalprato Dec 14 '21 at 08:20

score 2 · Answer 9 · edited Jan 29 '23 at 17:39

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.

score 1 · Answer 10 · answered Sep 28 '22 at 09:11

1

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

answered Sep 28 '22 at 09:11

Himanshu Patel

172
2
8

score 0 · Answer 11 · answered Jan 11 '22 at 08:47

0

This command worked for me,

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

answered Jan 11 '22 at 08:47

Thushara Buddhika

1,652
12
14

score 0 · Answer 12 · answered May 03 '23 at 12:22

0

Yarn:

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

answered May 03 '23 at 12:22

ckhatton

1,359
1
14
43

score 0 · Answer 13 · answered Jun 07 '23 at 14:03

0

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.

answered Jun 07 '23 at 14:03

Alexandr Rudyy

1
2

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](/help/how-to-answer). – Community Jun 07 '23 at 18:46

Node Sass with apple m1, Big Sur and arm64

13 Answers13

Case

Not working even after trying to install sass?

Yarn:

Linked