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

by

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.

More Related Contents:

  1. where is create-react-app webpack config and files?
  2. setState doesn’t update the state immediately
  3. How to update nested state properties in React
  4. Trying to use fetch and pass in mode: no-cors
  5. The create-react-app imports restriction outside of src directory
  6. How to scroll to an element?
  7. ReactJS – Lifting state up vs keeping a local state
  8. How can I clone a JavaScript object except for one key?
  9. npm start error with create-react-app
  10. How to add multiple classes to a ReactJS Component?
  11. Can I use arrow function in constructor of a react component?
  12. ES6 array map doesn’t return anything: ReactJS
  13. setState() inside of componentDidUpdate()
  14. Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
  15. Why React Hook useState uses const and not let
  16. Importing multiple files in react
  17. React.createClass vs. ES6 arrow function
  18. Clean way to keep original variable and destructure at the same time
  19. How to use create-react-app with an older React version?
  20. How do you import a javascript package from a cdn/script tag in React?
  21. Error: How to serialize data from getStaticProps : Next.js
  22. What do curly braces mean in JSX (React)?
  23. Update one of the objects in array, in an immutable way
  24. How to namespace es6 classes (for React components)
  25. React functional component default props vs default parameters
  26. Service Worker registration error: Unsupported MIME type (‘text/html’)
  27. Jest – SyntaxError: Cannot use import statement outside a module
  28. Mock inner axios.create()
  29. Exporting functions with reactjs and babel
  30. create-react-app is showing all my code in production, how to hide it?

Leave a Comment