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
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.