The biggest issue we all front-end developers have to deal with is supporting IE 😱. Another browser where App was not working well was Smart TV browsers. In case of React App, the blank page was rendered on both IE and Smart TV browsers.
After a lot of search and trial and errors, we found a partial solution in the React Documentation itself - Javascript Environment Requirements.
Solution
Since ES6 is not supported on Internet Explorer and older versions of Smart TV browsers, we have to use polyfills for the ES6 features. core-js is a standard library for polyfills. We can import polyfills only for the required features.
React also depends on requestAnimationFrame for which we can use raf polyfill.
Installing Dependencies
npm install core-js --save
npm install raf --save
npm install react-app-polyfill --save
Adding a file to import polyfills - polyfills.js
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import "core-js/es/symbol";
import "core-js/es/object";
import "core-js/es/function";
import "core-js/es/parse-int";
import "core-js/es/parse-float";
import "core-js/es/number";
import "core-js/es/math";
import "core-js/es/string";
import "core-js/es/date";
import "core-js/es/array";
import "core-js/es/regexp";
import "core-js/es/map";
import "core-js/es/weak-map";
import "core-js/es/set";
import "raf/polyfill";
Adding following code in the root file - index.js
import "react-app-polyfill/ie9";
import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";
if (window.fetch) {
// Check whether ES6 is supported in Modern Browsers
import("./app").then(function (module) {
module.default();
});
} else {
// For legacy or old browsers
import("./polyfills").then(() => {
import("./app").then(function (module) {
module.default();
});
});
}
Build and Serve using Static Server
Even if you are using polyfills the app will not directly run on IE. You will have to build it and serve it using static server like serve.
Top comments (0)