Autoprefixer doesn't support Node v13.1.0. Update it のエラー解消記録

こんにちは、web系エンジニアのみちおです。都内の医療系ベンチャー企業でサーバーサイドエンジニアとして働いています。今回はタイトルのエラーに悩まされたので解決するために行ったことを共有したいと思います。

環境

mac Catalina 10.15.7
Ruby 2.5.1
Rails 6.0.3.4

どのタイミングでエラーが発生したか？

bootstrapを導入しhttp://localhost:3000/recipes/indexにアクセスした時に発生した。

Started GET "/recipes/index" for ::1 at 2020-11-29 00:03:21 +0900
  (1.8ms)  SELECT sqlite_version(*)
  (0.9ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
Processing by RecipesController#index as HTML
 Rendering recipes/index.html.erb within layouts/application
 Rendered recipes/index.html.erb within layouts/application (Duration: 2.1ms | Allocations: 370)
Completed 500 Internal Server Error in 407ms (ActiveRecord: 0.8ms | Allocations: 19296)

RuntimeError - Autoprefixer doesn’t support Node v13.1.0. Update it.:
 app/views/layouts/application.html.erb:8

Started POST "/__better_errors/4afcc3742367517f/variables" for ::1 at 2020-11-29 00:03:22 +0900
Since there is no EDITOR or BETTER_ERRORS_EDITOR environment variable, using Textmate by default.
^C- Gracefully stopping, waiting for requests to finish

行ったこと① エラー内容を和訳

Autoprefixerはノードv13.1.0をサポートしていません。更新する
(google翻訳より)

この時はAutoprefixerが何か知らなかったのでスルーしています。笑

この翻訳をみてNodo.jsがサポートされていないことが原因だと目星を付けました。

行ったこと② エラー内容で検索

同じ現象の解決方法の記事を見たのですが、自分の理解不足のせいか解決されず、、

この現象に一番近い記事

行ったこと③ Node.jsのバージョンを下げる

他の記事を見てみるとNode.jsのバージョンが10.14.2だったのでNode.jsのヴァージョンを10.14.2にしてみた。

# 現在のバージョン確認
$ node -v
v13.1.0

# Node.jsのバージョン切り替えのためにインストールされているバージョンを確認
$ nvm ls
v13.1.0

# 10.14.2がないのでインストール
$ nvm install v10.14.2

# Node.jsのバージョンの切り替え
$ nvm user v10.14.2

# 現在のバージョン確認
$ node -v
v10.14.2

無事、Node.jsのバージョンを10.14.2に下げることができました！
これで解決したと思いきやrails sをしてみると次なるエラーが、、

> Booting Puma
=> Rails 6.0.3.4 application starting in development
=> Run `rails server --help` for more startup options
warning Integrity check: System parameters don't match
error Integrity check failed
error Found 1 errors.
========================================
 Your Yarn packages are out of date!
 Please run `yarn install --check-files` to update.
========================================
To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).
yarn check v1.19.1
info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.

行ったこと④ yarn install --check-filesの実行

エラー文に書いてあったyarn install --check-filesを実行してみました。

するとまたもやエラーが発生。

どうやらwebpackerがないらしい、、

Error Command "webpack" not found.
Completed 500 Internal Server Error in 5190ms (ActiveRecord: 0.7ms | Allocations: 70149)
Webpacker::Manifest::MissingEntryError - Webpacker can't find application in /Users/kadotamitsuhiro/git/ajax_app/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
  unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{

行ったこと⑤ webpackerのインストール

以下の2つを実行しwebpackerをインストールしました。

$ rails webpacker:install
$ rails webpacker:compile

無事表示されました！

エラー解決まとめ

・Node.jsのバージョンを下げる
・下げられるバージョンがなければインストールする
・webpackがない場合はインストールする

おまけ Autoprefixerって何？

最初に出てきたAutoprefixerについて調べてみました！

Autoprefixerとは、サポート対象にしたいブラウザを設定すると、自動的にベンダープレフィックスを付け、必要であれば構文の変更もしてくれるツール (引用記事)

なるほど、ベンダープレフィックスって何？？
調べてみました！

ベンダープレフィックスとは
・仕様確定までの間に、各ブラウザで先行して使えるようにされた新機能を使いたい
・ブラウザの開発・提供元（ベンダー）が開発した、独自の拡張機能を使いたい (引用記事)

なるほど、CSSの新機能を仕様確定までの間に先行して使いたい場合やベンダーが開発した独自機能を使いたい場合に使用するのですね！

CSS関連は業務で触れていなかったので良い勉強になりました！

調べてみるとベンダープレフィックス地獄というものがあるらしいです、、

毎日刻々と変化するブラウザの仕様を追い続け、必要なベンダープレフィックスだけを付与していくのは大変な労力です。(引用記事)

確かに大変そうですね、、

このベンダープレフィックス地獄を解決するためにAutoprefixerがあるのですね！

ちなみに、今回エラーに登場したAutoprefixerですがBootstrapに導入されているようです。

Bootstrap は, ビルド時にいくつかの CSS プロパティにベンダープレフィックスを追加するために Autoprefixer (ビルドシステムに含まれています) を使用しています。(引用記事)

もしかしたら、Bootstrapを導入しなければ今回のエラーを回避できたのかもしれませんね、、笑。

今回の正しい解決方法は、「AutoprefixerがサポートしているNode.jsのバージョンに下げる」でした！