【React】styled-componentsをIE11でエラーを発生させず使うための設定方法｜ 25歳でフリーランス28歳で起業したエンジニア -じゃけぇ- のあれこれ

React開発をしている際にCSS-in-JSのライブラリとして私はstyled-componentsを好んで使います。

が、

IE11ではそのままでは動きません。

はい、問題児IE君です。。

対応方法を書いておきます。

IEでstyled-componentsを使うための設定

必要なライブラリは以下の２つです。

・react-app-polyfill
・core-js

yanr もしくは npm で上記ライブラリをインストールし、index等のファイルに下記の設定を追加します。

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

import 'react-app-polyfill/ie11';

import 'react-app-polyfill/stable';

import 'core-js';

そしてもう１つ、package.jsonのbrowserslistにie 11を追加します

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