Node.js v14に更新したらnode-sassが動かなくなったので対処してみた
パッケージマネージャとしてHomebrewを利用しており, Node.jsも他のツールと同様にHomebrewで管理しています.
先日Node.jsが14.0.0をリリースしたこともあり, パッケージマネージャを通じてバージョンが13系から14系にアップデートされていました.
Node.jsに依存しているツールでは特に問題がなかったのでアップデートしたまま利用していましたが,
Nuxt.jsを利用したプロジェクトでyarn devを実行したところ, node-sass側でエラーが起きてしまい起動できなくなりました...
本記事では原因と対処について記載していきます.
TL; DL
- エラーメッセージを確認して, 記載内容をまずは確認する
- node-sassのバージョンによってサポートしているOS, Node.jsのバージョンが異なるのでリリースページで確認する
エラーの原因と対処について
yarnを利用して, Nuxt.jsを動かそうとした際に, 下記のようなエラーが発生しました. 一部出力を端折っています。
$ yarn dev
✖ Client
Compiled with some errors in 7.53s
✖ Server
Compiled with some errors in 6.99s
ERROR Failed to compile with 1 errors friendly-errors 16:11:27
ERROR in ./pages/index.vue?vue&type=style&index=0&id=xxxxxxxx&lang=scss&scoped=true& friendly-errors 16:11:27
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): friendly-errors 16:11:27
Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (83)
For more information on which environments are supported please see:
<https://github.com/sass/node-sass/releases/tag/v4.13.1>
at module.exports (./node_modules/node-sass/lib/binding.js:13:13)
at Object.<anonymous> (./node_modules/node-sass/lib/index.js:14:35)
at Module._compile (internal/modules/cjs/loader.js:1185:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1205:10)
at Module.load (internal/modules/cjs/loader.js:1034:32)
at Function.Module._load (internal/modules/cjs/loader.js:923:14)
at Module.require (internal/modules/cjs/loader.js:1074:19)
at require (internal/modules/cjs/helpers.js:72:18)
at getDefaultSassImplementation (./node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
at getSassImplementation (./node_modules/sass-loader/dist/getSassImplementation.js:19:72)
at Object.loader (./node_modules/sass-loader/dist/index.js:40:61)
エラーメッセージの中に親切に原因と確認すべきところが書いてありますね. 私は見逃していてあれこれ調べた挙句に気付いたのですが...
まず, エラーの原因は「私が利用していた, node-sass 4.13.1がNode.js v14をサポートしていなかったこと」です.
node-sassのバージョンによってサポートする「OS」, 「アーキテクチャ(x86かx64か)」, 「Node.js」が異なります.
そのためプロジェクトで利用していたnode-sassのバージョンが4.13.1であり, このバージョンがNode.js 14をサポートしていないためビルドに失敗していました.
最新版である node-sass 4.14.0ではmacOSでかつNode.js v14をサポートしているので, node-sassのバージョンをアップデートすることでエラーは解消し, ビルドが通るようになりました.
Node.js のダウングレードについて
先ほどエラーの原因と対処方法は書きましたが, 最初はNode.jsのバージョンが対応してないから下げようという発想で考えていました.
なので直接的な対処ではないのですが, Node.js v14だと利用できないパッケージがあったり, node-sassのバージョンをあげたくない場合に有用な手段になり得るので,
Node.js をv14からv12にダウングレードする方法も合わせて記載します.
継続的にNode.jsについて複数バージョンを管理したい場合はnodenvの利用についてもオススメしておきます.
まずは最新のNode.jsを削除します. yarnを利用している場合は合わせてyarnも削除しましょう.
$ brew uninstall node
次にNode.js v12をインストールします.
インストールが終わった後に, brew linkを利用してNode.jsのパスをv12に向けます. ここの工程を忘れるとうまく動作しないので注意しましょう.
$ brew install node@12 $ brew link --force --overwrite node@12
インストールと設定はこれで終わりです.
最後にバージョンを表示してv12であることを確認しましょう.
$ node -v v12.16.3
簡単にバージョンの切り替えができますね. 必要でしたらこちらの手順もご活用ください。
さいごに
エラーメッセージは非常に有用なものであるのにもかかわらず何故毎回見過ごしてしまうのでしょう...
今回もまたエラーメッセージをよく読まずに幾らかもがいていたので見返して切なくなっていました.
この記事がお役に立てたら幸いです.
