Webpack ビルドエラー「ForOfStatement」の解決方法 (axios)
はじめに
こんにちは。
子育て中の母親で、現役看護師をしています。
エンジニア転職を目指して勉強中です。
Rails + Webpack を使って開発しているときに、ForOfStatement に関するエラーが発生しました。このエラーの原因と解決策をまとめておきます。
発生したエラー
Webpack のビルド時に以下のようなエラーが発生しました。
ERROR in ./node_modules/axios/lib/helpers/trackStream.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: /Users/***/blog-app/node_modules/axios/lib/helpers/trackStream.js: unknown Statement of type "ForOfStatement"
解決策
1. .browserslistrc に IE11 を追加
Babel の browserslist 設定を変更し、IE11 のサポートを有効にすることで解決できました。
手順
-
.browserslistrcファイルを開く（または新規作成） - 以下の内容を追加
defaults
IE 11
- 設定を更新するために、以下のコマンドを実行
npx browserslist --update-db
- Webpack を再起動
bin/webpack-dev-server
最終的な結果
この対応を行った後、Webpack のビルドが正常に完了しました。
ℹ ｢wdm｣: Compiled successfully.
これでエラーが解消され、ブラウザでアプリが正常に動作するようになりました！ 🎉
まとめ
browserslistrcのdefaultの対象にIEが含まれていなかった。
そこで差異が出てしまい、今回のエラーが発生してしまったのではないか。
それに対して、IE11を追加してあげることにより解消されたと考える。
解決策:
.browserslistrc に IE 11 を追加
参考リンク
勉強を進めていく中で、最近は互換性の問題でエラーが出ることが多い。
依存先のライブラリのちょっとした設定の違いで動かなくなってしまうため、陥ると焦ります。
まずは、しっかりエラー内容を知ることが大事なのだとわかりました。