🕌

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のバージョンアップ

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

node_modules 配下はトランスパイルしない

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

対応内容

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

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

参考記事:
https://zenn.dev/aiji42/articles/1de8f9ea7b8a10#2.-next-transpile-modules-(モジュールトランスパイル)

まとめ

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

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

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

Discussion

ログインするとコメントできます