Railsでunknown Statement of type "ForOfStatement" のエラーが起きたときの解消法

サマリ

何が起こったか

axios導入後、コンパイルエラーが発生しました。
具体的なメッセージは以下のとおりです.

Failed to compile.
./node_modules/axios/lib/helpers/trackStream.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: /home/omi/blog-app/node_modules/axios/lib/helpers/trackStream.js: unknown Statement of type "ForOfStatement"

何をして解消したか

プロジェクトルートディレクトリ直下の.browserslistrcファイルにIE 11と記述しました。

// .browserslistrc

defaults
IE 11

詳細

開発環境

• Rails: 6.0.6.1
• Node.js: 14.16
• webpacker: 5.4.4
• webpack: 4.47.0
• axios: 1.7.7

エラー発生のタイミング

下記のコードをapplication.jsに記述したタイミングで発生。

import axios from "axios";

document.addEventListener("DOMContentLoaded", () => {
  $(".article_title").on("click", () => {
    axios.get("/").then((response) => {
      console.log(response);
    });
  });
});

エラーの近接的な原因

最も近接的な原因は、babel-loaderがaxios内の記述を理解できず適切にコンパイルできなかったことと推測しました。

解決のためにやったこと

関連するライブラリのバージョンを確認

各ライブラリ間の互換性を確認しました。
具体的には以下のコマンドを使用しました。

yarn list --pattern ライブラリ名

結果、互換性はありました。

Googleで検索

Error: unknown Statement of type "ForOfStatement"　railsで検索しました。
以下の記事を見つけ、解決策を実行し解消しました。
https://stackoverflow.com/questions/72936556/how-to-solve-syntax-error-of-d3-array-src-number-js-unknown-statement-of-type

エラーの根本的な原因

前提

• そもそもbabelはjavascriptの新しい仕様を古いブラウザなどでも使用できるようにコンパイルするライブラリ

• babel-loaderはrailsのwebpackerがbabeと連携するためのもの

• 今回のエラーはaxiosの記述内容に、"ForOfStatement"というものがあり、それをbabelが認識できなかったため起きたエラー

• browserslistrcは対象となるブラウザを指定するためのファイル

• babelはbrowserslistrcの設定に基づいてコンパイルする

• browserslistrcにIE11を追加すると、IE（インターネットエクスプローラー）11で適切にjavascriptが読み込まれるようになる

• browserslistrcはデフォルトではIE11をサポートしていない

推測

おそらく、babelはIE11用の設定で適用されるなにかしらの機能がないと動かないが、browserslistrcのデフォルトではその設定がなされていないためおきたエラー。
広義の意味では互換性の問題ともいえそう。