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を立ち上げ直すと。。。
結果：⭕️


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

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