Cross-Browser Support with React Polyfills - For IE & Smart TV Browsers

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.