While this should be a fantastic development, here comes that giant black cloud that we all know too well: Customers.
If you’ve been in front end development for any time at all, you have been through this scenario: After building your latest and greatest new feature that performs just right, you dust off that ugly step sibling known as Internet Explorer, and……nothing. Something you’ve written has offended the browser that won’t die so deeply that all you see is a blank white page.
After cursing Barb from accounting, and remembering her insistence on using IE8 even though Microsoft ended support for IE in January 2016, brewing another cup of coffee, and calming down a bit, you open up the console to see just what IE could be throwing a fit about now:
It seems that this time, IE doesn’t support Array.find
A Polyfill is a piece of code that adds functionality to older (or just less compliant) browsers so that you can use the latest and greatest features from the W3C specification
Before we go any further, I should explain what Transpiling is and how it differs from Polyfills.
Transpiling is the process of compiling code from one “language” to another. If you are using React through create-react-app then you are already using the transpiler Babel which converts all of your fancy classes, arrow functions, const and let variables from ES2015 (and above) into code that browsers understand.
If you are wondering which functionalities will require a polyfill, one of the easiest ways to check is to take the list of minimum browser versions you will be supporting and search the fantastic site Can I Use to your heart’s content.
Once you’ve determined which polyfills are required, one good resource which may have pre-made open source polyfills that suit your needs is MDN
Create React App built in Polyfills
Luckily, those of us using create-react-app already have two rather useful polyfills included upon creation of our application.
- Promise to handle the ECMA6 Promise proposal
- fetch that has replaced the old XMLHttpRequest
While these two polyfills are great… this begs the question, why not more? Why not Array.find or Array.includes???
Well the answer is: it’s not all about you, now is it?
Actually, the create-react-app developers have only included what they deem absolutely necessary in order keep the size of the library to a minimum. (for a far more thorough discussion, check out this link here)
So for now, we are on our own…
You’ll notice that this has come directly from the MDN site, with the small addition at the top of the file:
/* eslint no-extend-native: “off” */ which will prevent the linter from complaining and spitting out warnings in the console:
You may find it easiest to create a central file which calls each of the polyfills you’re using. We make use of an index.js file that looks similar to the following:
This way, there is only one file to import via the base index.js file.