DEV Community

Ahmed Khaled
Ahmed Khaled

Posted on

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'
...
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
stevebates profile image
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.