CODEWITHSUNDEEP
javascriptreactjsecmascript-6create-react-appecmascript-2016
Daniel Loiterton
Daniel Loiterton

Reputation: 5308

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

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?

Upvotes: 99

Views: 117261

Answers (6)

Daniel Loiterton
Daniel Loiterton

Reputation: 5308

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'

...etc...

2. Polyfill service

No longer advised. See this article

Upvotes: 140

David J Barnes
David J Barnes

Reputation: 506

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>

Upvotes: 3

Dual
Dual

Reputation: 1

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.

Upvotes: 0

icewhite
icewhite

Reputation: 417

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.

Upvotes: 13

webmaster
webmaster

Reputation: 2020

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

Upvotes: 0

gus3001
gus3001

Reputation: 919

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.

Upvotes: 6

Related Questions