Node Sass does not yet support your current environment: Linux Unsupported architecture (arm64)

dockerで起動したrailsアプリでエラー出ていたので備忘録

エラー内容

Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass does not yet support your current environment: Linux Unsupported architecture (arm64) with Node.js 12.x
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
    at module.exports (:3000/app/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (:3000/app/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (:3000/app/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (:3000/app/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at getDefaultSassImplementation (:3000/app/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
    at getSassImplementation (:3000/app/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
    at Object.loader (:3000/app/node_modules/sass-loader/dist/index.js:40:61)
    at ./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/ride-info.vue?vue&type=style&index=0&id=356a5b7d&lang=scss&scoped=true& (ride-info.vue:46:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/ride-info.vue?vue&type=style&index=0&id=356a5b7d&lang=scss&scoped=true& (ride-info.vue?aaa8:2:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./app/javascript/ride-info.vue?vue&type=style&index=0&id=356a5b7d&lang=scss&scoped=true& (ride-info.vue?68a5:1:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./app/javascript/ride-info.vue (ride-info.vue:1:1)
    at __webpack_require__ (bootstrap:19:1)
    at ./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/alarm-table.vue?vue&type=script&lang=js& (utils.js:370:1)
    at __webpack_require__ (bootstrap:19:1)

ふむふむ、どうやらnode.jsのバージョンとnode-sassのバージョンの相性が良くないみたい。
n コマンドでnode.jsのバージョンを確認すると

node/16.17.0

むむむ。。。エラー内容的にはバージョン１２は対応してねーぞっていってそうに見えたんだけどな。。。

試した事

ひとまずネットで検索して記事がないか探してみる。以下あたりでヒット

• node-sassをリビルド
  https://akamist.com/blog/archives/5420
  https://dev.classmethod.jp/articles/node-sass-could-not-find-a-binding/
  結果：❌

• モジュールの中身を書き換え
  https://piitre.com/blog/programming/node-sass-error/
  結果：❌

上記記事でエラー治らなかったので次に試したこと

• node-sassのバージョンアップ
  node-sassのバージョンは4.14.1を使っていたので、以下表から6.0系までバージョンアップさせた。
  （https://github.com/sass/node-sass/issues/3033）

NodeJS	Supported node-sass version	Node Module
Node 17	7.0+	102
Node 16	6.0+	93
Node 15	5.0+, <7.0	88
Node 14	4.14+	83
Node 13	4.13+, <5.0	79
Node 12	4.12+, <8.0	72
Node 11	4.10+, <5.0	67
Node 10	4.9+, <6.0	64
Node 8	4.5.3+, <5.0	57
Node <8	<5.0	<57

結果：❌

結論

同プロジェクトのエンジニアは動作しているのでnpmバージョンに差異がないか調べると以下の差異があった

変更前	変更後
@rails/webpacker@5.1.1	@rails/webpacker@5.4.3
webpack-dev-server@3.11.0	webpack-dev-server@3.11.3

上記2項のモジュールのバージョンを変更し、dockerを立ち上げ直すと。。。
結果：⭕️

感想

上記モジュールがどのようにエラー内容に関係しているかまでは調べてない（おい）
ひとまず同じように困っている方いればモジュールのアップグレードをしてみると上手くいくかもしれないです。

時間あるときになぜエラー出てたのか調べようかな！