Enabling react apps for IE11

In this modern web application era, Now es7 also got released but still, we need to give support to some legacy browsers like ie 11, ie 10. Because they don’t understand most of the things from es6 like below

• Promise
• browser fetch
• spread operators
• aync and await etc.

Let’s understand how we can enable react application for IE browsers

If you don’t want to go through this post then here is Github repository for react starter app with IE supported

Github Link

let’s go step by step

Adding polyfills to react app

There is already a react-app-polyfill package which takes cares of all the mandatory polyfills require for supporting native browsers

You need to install that package by using below command

 npm i --save react-app-polyfill

above command install the packages for react polyfill.

Note: For people who don’t know what is polyfill. Polyfill is a term which means. It has rewritten the same functionality whatever written in an es6 and es7 standard, Which does not support on native browser.

For IE support, we need to import browser version-specific module in root file means in index.js file

for ie9

import 'react-app-polyfill/ie9';

for ie 11

import 'react-app-polyfill/ie11';

There are other browsers also who needs pollyfills for that we need to import react app stable module like below

import 'react-app-polyfill/stable';

So, your code will look like

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Adding browser version in browserList

We need to add ie11 in browserlist section under package.json. It’s mandatory because it tells the transpiler that outputted code should be compatible with the browser

package.json will be look like

{
  "name": "react-app-with-polyfill",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-app-polyfill": "^1.0.6",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "ie 11",
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

As you can see above we have included the ie11 browser version in the development section.After adding you need to delete the .cache folder under node_modules to pick up the changes because the babel-loader don’t know regarding the changes. Still, if it is not working then just delete node_modules, install it again and restart the server.

Conclusion:

This is the configuration you need to do, after that it will start run on IE browser.