Polyfill in Reactjs

What is Polyfill?

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it. -- definition from MDN

There're two approaches if you want to support older browsers like ie11:

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:

/* polyfill.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'
...

---

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.

Finally, it might arise to your head a good question: Why polyfills aren't used exclusively?

The reason why polyfills are not exclusively used is for better functionality and better performance. Native implementations of APIs can do more and are faster than polyfills. For example, the Object.create polyfill only contains the functionalities that are possible in a non-native implementation of Object.create.

Comments

[steve bates]

NB the polyfill.io domain was taken over by a malicious chinese group, who used it to carefully add their own code.

thehackernews.com/2024/07/polyfill...

Unless you need to support IE polyfills are not required.