GatsbyJSのIE 11対処方法

GatsbyJS の IE11 対応

GatsbyJS で IE11 対応するにはどうすればいいか調べました。
かなり簡単に対応できるのでまだしてない方は是非どうぞ。

1. npm の追加

yarn add babel-preset-gatsbyで babel の設定をまとめたものをプロジェクトに追加します。

2. .babelrc の作成

プロジェクトルートに.babelrcファイルを作成します。
↓ のコードをそのままコピー&ペーストします。

{
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "target": {
          "browsers": [
            ">0.25%",
            "not dead",
            "IE 11"
          ]
        }
      }
    ]
   ]
 }

3. 足りない polyfill を追加

fetchとPromiseが不足しているのでgatsby-browser.js等で import します。
私は全ページで読み込むLayout.jsxに polyfill.io への script タグを追加しました。

<Helmet>
  <script defer src="https://polyfill.io/v3/polyfill.min.js?features=fetch%2CPromise"></script>
</Helmet>

4. 注意点

1 ～ 3 の設定をしても開発環境では画面が白くなります
gatsby build && gatsby serveで本番用モジュールを作成して動作確認してください。

私は最後の注意点に気が付かなくてかなり迷いました。

この記事は自分で書いてるブログから転載しました。