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

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.

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.

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 importimport 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.