M1以降のmacでnode-sassをインストールしようとした際にエラーになったので対応したメモ

メインの作業マシンはすでにM1以降のMacBook Airに移行しているが、唯一Gatsby関連のプロジェクトではまだIntelチップのMacBook Proでないと yarn install が成功しない状態となっていた。

今回は重い腰を持ち上げて、M1以降のmacでもGatsby関連のプロジェクトをセットアップできるようにした際の個人的なメモとなる。

macとNode.jsとGatsbyのversion

M1以降のmacでは、Gatsbyに関しては共通してnode-sass(node-gyp)絡みのインストールに成功していない。
そして今回作業するマシンは M1 MacBook Air となる。

macOSのバージョンは 12.6.1

Node.jsのバージョンは

node -v
v16.14.0

Gatsbyは

"gatsby": "^2.23.7",

となっている。

他にも影響している依存ライブラリがあるかもしれないが、ひとまずこれだけ載せる。

最初に結論：node-sass ではなく sass を入れることで解決。

最初に結論を書いておくと、以下のように node-sass ではなく sass を入れることで解決した。

yarn remove node-sass
yarn add sass

node-sassをインストールするために python 2 を入れたり、不必要に古いバージョンを利用するということはせずに対応できたので良かった。

エラーの内容（Python 2が見つからない。だが、Python2を入れたくない）

プロジェクト内で yarn install した際のログは以下となる。

※関係ありそうなところを抜粋している

gyp info using node-gyp@3.8.0
gyp info using node@16.14.0 | darwin | arm64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2

python2 が見つからない？

また以下のようなエラーメッセージも出ていた

gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?

内容的にはPython 2前提で処理が走るようになっているのか？

ちなみにエラーの発生源は node-sass で、 node-sass に依存している node-gyp 内でエラーになっているように見える。

package.json を見るとたしかに node-sass も利用していた。

"node-sass": "^4.14.1",

node-sass のために python2 をわざわざ入れたくない...

node-sassのバージョンを上げてみる？

で、ちょっと調べてみた感じ node-sass のバージョンを上げると対応されているかも？と思ったので試してみた。

github.com

GitHubのREADMEを見た感じだと、node v16系にはversion 6系が対応していそうだったので、

yarn add node-sass@6

で6系を入れる。

するとインストールは完了した。

これでうまく行ったか？と思いきや、buildしてみると今度は以下のようなエラーがWebpackから出ていた。。

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

node-sass ではなく sass で解決

関係ありそうな情報を探してみると以下のようなissueを見つけた

github.com

そこで見つけた記述に node-sass を削除して代わりに sass を入れてみると良い、というものがあったので試してみた。

yarn remove node-sass
yarn add sass

インストールした sass のバージョンは以下。

"sass": "^1.57.1"

で、これで問題は無事に解決した！

というわけで、同じような事象で困っている方がいらっしゃいましたら、node-sass ではなく sass が解決の糸口になるかもしれません。

at backyard

Color my life with the chaos of trouble.