🕌

npmのライブラリアップデートしたら、IE11で動かなくなった

2022/04/22に公開

現場の案件で、大量の npm ライブラリアップデートを担当したのですが、
IE11 でクリックイベントが起動せず苦労したので備忘録です。

※事情により、文字だけです。ご了承ください。

コンソールログにエラーが…

開発ツールを開きながら画面を再描画。
すると文字が正しくありません。のエラーが表示されました。
英語だとsyntax error。

IE11 は ES6 をサポートしていないため、
アロー関数（()=>）やテンプレートリテラル（{`${変数}です`}）などを使っていると発生するエラーです。

しかし、next.js を使用し@babel/polyfillも設定している。
ES6 はトランスパイルされているはずなのに、発生する意味がわかりません。

まずは、エラーが発生している箇所を探します。
大体、コンソールログに該当ファイルへ移動するリンクがあるので、
そこをクリックしファイルへ移動します。

今回は、アロー関数が原因のようです。

次にトランスパイル後のファイルを作成します。
現場では、next.js を使用しているため、next buildで作成します。

そして、トランスパイル後のフォルダ内をアロー関数で検索します。
ヒットした前後の内容から、問題の module を探します。

今回はaxiosの依存ライブラリis-retry-allowedが原因でした。

axiosをバージョンアップした結果、
is-retry-allowedもバージョンアップした。
その結果、アロー関数を使う記述になっていた

next.config を確認したところ、
node_modules 配下をトランスパイルしない設定になっていた。
これは、ビルドの時間を削減するための対策でした。

next-transpile-modulesを使って、is-retry-allowedをトランスパイル対象にしました。

is-retry-allowed以外にも、対象 modules が有る場合があるので、
その際は、再度調査を行います。

最近は、IE11 のサポートが切れるということで、
多くのライブラリが IE11 のサポートをしなくなっています。
その影響が、こんなところに出てくるとは…

今回は、私が実際、現場で調査した内容を残しましたが、
もっと簡単な調査方法があるかもしれません。

知っている方いたら、ご意見いただけると助かります。