Help us understand the problem. What is going on with this article?

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 を追加

fetchPromiseが不足しているので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で本番用モジュールを作成して動作確認してください。

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

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

mako-tos
npmモジュール公開してみた @mako-tos/gatsby-transformer-for-microcms @mako-tos/gatsby-images-microcms
https://myblog-by-mako-tos.netlify.app/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away