91

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?

Daniel Loiterton
  • 3,737
  • 4
  • 25
  • 39

6 Answers6

124

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.

Daniel Loiterton
  • 3,737
  • 4
  • 25
  • 39
  • 19
    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. – Dan Abramov May 03 '17 at 20:29
  • 1
    That sounds smarter, thanks Dan. You mean https://github.com/zloirock/core-js, I assume (ie. npm install core-js)? – Daniel Loiterton May 04 '17 at 07:57
  • 7
    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 `` (notice the `es6`) and now its working like a charm. I believe the main issue was needing a polyfill for Symbol. – dougmacklin Jun 06 '17 at 13:45
  • 1
    @dougmacklin 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. – Clinton Chau Apr 16 '18 at 14:43
  • 1
    @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 – dougmacklin Apr 16 '18 at 18:13
  • @DanAbramov what is the reason for not including these by default? Or the babel/polyfill? – patotoma Oct 17 '18 at 11:37
  • @patotama, Dan explains in this post: https://github.com/facebook/create-react-app/issues/914#issuecomment-255336818 – Daniel Loiterton Oct 17 '18 at 13:39
  • 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. – PhoenixPan Oct 30 '18 at 22:36
  • @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 :-) https://gist.github.com/ofhouse/d9a67e306526b317b0f6b9cbedf391e5 – ofhouse Apr 17 '19 at 09:25
  • Thanks, @ofhouse. I've updated the answer accordingly – Daniel Loiterton Apr 17 '19 at 14:35
  • There is now polyfill v2 -> This is the updated url - `https://polyfill.io/v3/polyfill.min.js?features=default%2CArray.prototype.includes` – Gal Bracha Oct 19 '19 at 03:32
  • according to chrome audits, – Seeliang Jan 22 '20 at 00:24
  • 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? – Per Quested Aronsson Jan 15 '21 at 08:02
12

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.

icewhite
  • 408
  • 3
  • 14
  • 1
    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 :-) – icewhite Nov 26 '18 at 11:35
  • 4
    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. – Huong Nguyen Jan 24 '19 at 08:14
6

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.

gus3001
  • 793
  • 6
  • 17
  • 1
    Something like this appears to now be the suggested best practice for Create React App projects. See: https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md – Peter W Oct 12 '18 at 02:51
3

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>
David J Barnes
  • 504
  • 9
  • 15
0

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 ;)

webmaster
  • 1,658
  • 21
  • 25
0

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.

Brian Tompsett - 汤莱恩
  • 5,195
  • 62
  • 50
  • 120
Dual
  • 1
  • 1