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?

Pause

Babel provides babel-polyfill as an easy ES6+ polyfill. – Shauna

Note that Array.prototype.includes() is actually in ES7, not ES6 – Malinda

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

Pause

I would probably get more granular. Instead of copy pasting you can install core-js and import individual global polyfills from your polyfills.js. Other than that both approaches sound fine. – Abner

That sounds smarter, thanks Dan. You mean github.com/zloirock/core-js, I assume (ie. npm install core-js)? – Pause

I was running into an issue with an app generated with the latest create-react-app not appearing on IE 11 and below. Thanks to this solution, I ended up including <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6"></script> (notice the es6) and now its working like a charm. I believe the main issue was needing a polyfill for Symbol. – Scabrous

@Scabrous Just FYI: It's hit or miss, because in my case, using your include didn't solve my IE 11 problems. Unfortunately, the developer console in IE 11 was also very unhelpful in figuring out which language feature was tripping it up. We ended up using babel-polyfill. Heavy-handed, I know, but we needed to get the production site going. – Remaremain

@ClintonChau, totally understandable. Since I posted that comment, I did end up having to use babel-polyfill on another project to fix a different IE 11 issue – Scabrous

@DanAbramov what is the reason for not including these by default? Or the babel/polyfill? – Syntactics

@patotama, Dan explains in this post: github.com/facebook/create-react-app/issues/… – Pause

polyfill.io CDN will cause issues with (at least) Redux Saga in IE11, I'd go with babel-polyfill if I don't have time to extract each function that I need. – Stilbestrol

@DanielLoiterton Seems like core-js changed the internal structure of it's package in the latest 3.0.0 release. So the path for the imports changed from core-js/fn/** -> core-js/features/**. I created a gist with the updated paths here, feel free to update the code-example in your answer :-) gist.github.com/ofhouse/d9a67e306526b317b0f6b9cbedf391e5 – Alee

Thanks, @ofhouse. I've updated the answer accordingly – Pause

There is now polyfill v2 -> This is the updated url - https://polyfill.io/v3/polyfill.min.js?features=default%2CArray.prototype.includes – Mertens

according to chrome audits, <script> with polyfill is blocking render and it is costing 760ms ... – Burnsed

Regarding approach #1: Is react-app-polyfill really needed if we include core-js? Which polyfills exist only in the former and not the latter? – Libby

What do you actually write inside polyfill.js? – Annulment

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

Suds

I think my answer is the best, but that's only because it's more recent - the react-app-polyfill was only created a few months ago and until then the other answers were obviously better :-) – Suds

Hi @icewhite, I think you misunderstood a bit about react-app-polyfill. The package just include polifill of: Promise, window.fetch, Object.assign, Symbol, Array.from. It doesn't include Array.prototype.includes() or others. – Miscreance

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

Centrality

Something like this appears to now be the suggested best practice for Create React App projects. See: github.com/facebook/create-react-app/blob/master/packages/… – Dinh

Answer 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>

Dropforge

Answer 5

Eject from your Create React App Project

Afterwards you can put all your polyfills in your /config/polyfills.js file

Put the following at the end of the file

Object.values = Object.values ? Object.values : o=>Object.keys(o).map(k=>o[k]);

Webpack will automatically fix this for you ;)

Benny

actually found a better way, npm install --save core-js; import 'core-js/fn/object/values'; – Benny

Can you please edit your answer with this better way? – Photogene

Answer 6

I had the same problem. A solution from Daniel Loiterton didn't work for me. But! I added one more import from core-js import 'core-js/modules/es6.symbol'; and this works for me on IE11.

Chere