create react appで作ったアプリをIE11対応させる

動機

そろそろ世間的にIE11はフェードアウトしたかなと思っていたのですが、
2020年4月時点でまだ結構なシェアを誇っているとい非常に不都合な真実にぶち当たりました。
参考：https://webrage.jp/techblog/pc_browser_share/

如何にもモダンブラウザでしか動かなそうな機能を使っているならまだしも、
そうではない一般に公開するページで「ご利用のブラウザは非対応です。」と表示するわけにもいかないので、対応を試みました。

TL;DR;

• ポリフィルを投入
• 開発モードで動かない時には、package.jsonのbrowserslist.developmentをproductionと合わせる
• それでもダメならnode_modules>.cacheを消してからyarn or npm install

ポリフィル

公式のpolyfillがあるので入れましょう。
https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill

yarn か npmで追加した後、以下をindex.js またはindex.tsの頭につけてあげればOKです。

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

開発環境でのテスト

当然、投入した後に yarn start あたりを叩いて起動検証を試みるわけですが、
残念ながらこのままでは動きません。

原因はpackage.jsonのbrowserlistにあります。

create-react-appでプロジェクトを作った後、変更を加えていないと以下のような感じのはずです。

 "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

詳しい仕様は公式を参照していただきたいところですが、
開発モード(普通にstart)の場合、Chrome,Firefox,Safariの最新版のみを想定したビルドになってしまうので、polyfillをimportしてもIE11では動きません。
polyfillの適用具合を確認したい場合は、productionの内容でdevelopmentの方を上書きして試しましょう。

それでも動かなかったら

node_modules/.cacheにキャッシュが残ってしまっている可能性が高いので、
消してnpmなりyarnなりを叩き直しましょう。