Best way to polyfill ES6 features in React app that uses create-react-app

Question

I've been testing my React.js application on internet explorer, and finding that some ES6/7 code like Array.prototype.includes() breaks it.

I'm using create-react-app, and apparently they've chosen not to include a lot of polyfills since not everyone needs them, and they slow down build times (see for example here and here). The documentation (at time of writing) suggests:

If you use any other ES6+ features that need runtime support (such as Array.from() or Symbol), make sure you are including the appropriate polyfills manually, or that the browsers you are targeting already support them.

So... what is the best way to 'manually' include them?

Solution 1

Update: The create-react-app polyfill approach and docs have changed since this question/answer. You should now include react-app-polyfill (here) if you want to support older browsers like ie11. However, this only includes the "...minimum requirements and commonly used language features", so you'll still want to use one of the approaches below for less common ES6/7 features (like Array.includes)

---

These two approaches both work:

---

1. Manual imports from react-app-polyfill and core-js

Install react-app-polyfill and core-js (3.0+):

npm install react-app-polyfill core-js or yarn add react-app-polyfill core-js

Create a file called (something like) polyfills.js and import it into your root index.js file. Then import the basic react-app polyfills, plus any specific required features, like so:

/* polyfills.js */

import 'react-app-polyfill/ie11';
import 'core-js/features/array/find';
import 'core-js/features/array/includes';
import 'core-js/features/number/is-nan';

/* index.js */

import './polyfills'
...

---

2. Polyfill service

Use the polyfill.io CDN to retrieve custom, browser-specific polyfills by adding this line to index.html:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>

note, I had to explicity request the Array.prototype.includes feature as it is not included in the default feature set.

Solution 2

Use the react-app-polyfill which has polyfills for the common ES6 features used in React. And it's part of create-react-app. Make sure you include it at the start of index.js as defined in the README.

Solution 3

I used yarn to download the polyfill and imported it directly in my index.js.

In command prompt:

yarn add array.prototype.fill

And then, at the top of index.js:

import 'array.prototype.fill' // <-- newly added import
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
...

I like this approach since I am specifically importing what I need into the project.

Solution 4

For what it's worth I was having issues with the new Google Search Console and my React app (create-react-app). After adding the es6shim, all was resolved.

I added the below to my public index.html page.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

View more solutions