# Why React applications do not work on Internet Explorer and how to make them work

As you are aware, the latest ES6 features such as promises, arrow functions, etc may not be supported by older browsers, so we use Babel to convert the code to ES5 code which all browsers understand.

When we use `create-react-app` to create a React application, it includes Babel by default for the conversion of ES6 to ES5 code. But that is not sufficient to support all browsers.

Open [this application](https://babel-repl-clone.now.sh/) (which is created in [this article](https://levelup.gitconnected.com/create-a-clone-of-babel-repl-site-to-convert-es6-react-code-to-es5-93cdc9ad98ea?source=friends_link&sk=517cfac3dfc4b451610eb298f36a428c)) to see the conversion from ES6 to ES5 and paste the following code:

```js
const sayHi = () => console.log('Hi')
```

You will see that the ES6 code is converted to ES5 as shown below

![ES6 to ES5](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/264a1288a2eaadf9196735c46e3555c4b85c5789/transpiler_1.png)

But if you paste the following code:

```js
var promise = new Promise(function(resolve, reject) {
 resolve();
});
```

you will see that the babel converted output is exactly the same as the input.

![ES6 to ES5](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/2b98f7c7ada057560015dbe98fd4034e8c6b5bef/transpiler_2.png)

So if your browser understands promises, then your code will work fine, but for older browsers like Internet explore version 11, this code will not work.

Therefore, if your application is using promises directly or indirectly using `axios` or the `superagent` library, then your application will not work on internet explorer or older browsers.

Let’s consider the `Array.prototype.includes` method (added in ES7) which is used to check if a particular element exists in an array.

![ES6 to ES5](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/2b98f7c7ada057560015dbe98fd4034e8c6b5bef/transpiler_3.png)

As you can see, for the `Array.prototype.includes` method, the ES5 code is the same as the input, so your application will not work on Internet Explorer if you are using this method anywhere in your application.

So long story short, just using babel is not enough for your application to work because all the latest Javascript features are not supported in all browsers. So to fix this problem, we need to use a polyfill.

-----

If you’re using your own webpack + babel setup as shown in this article, or create-react-app and you’re using babel version greater than or equal to 7.4.0, install babel polyfill by executing the following command from the terminal or command prompt.

```js
npm install core-js@3.6.5 --save

OR

yarn add core-js@3.6.5
```

> Because this is a polyfill (which will run before your source code), we need it to be a dependency and not a devDependency so we added `--save` flag

If you’re using an npm version greater than or equal to 5.0.0 then there is no need of 
`--save` flag because it’s implied by default.

*To find out which version of babel your create-react-app is using, open `node_modules/react-scripts/package.json` file in your project folder and check `@babel/core` version in the `dependencies` section.*

And once the `core-js` package is installed, add the import for it before all the other import statements in your main `app.js` or `index.js` file as:

```js
import "core-js/stable";
```

![ES6 to ES5](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/2b98f7c7ada057560015dbe98fd4034e8c6b5bef/transpiler_4.png)

That’s it. Now your application will work on Internet Explorer or any other older browsers even if you’re using the latest Javascript features like `Array.from` method, `Promises`, or `Array.prototype.includes` etc.

------

If you’re using your own webpack + babel setup or create-react-app and

1. If your Babel version is less than 7.4.0 and greater than or equal to 7.0.0

```js
npm install @babel/polyfill@latest --save

OR

yarn add @babel/polyfill@latest
```

and in the main `app.js` or `index.js` file include

```js
import "@babel/polyfill";
```

2. If your Babel version is less than 7.0.0

```js
npm install babel-polyfill@latest --save

OR

yarn add babel-polyfill@latest
```

and in the main `app.js` or `index.js` file include

```js
import "babel-polyfill";
```

That’s it.

If you really want to confirm this behavior, you can open [this application](https://my-node-react-app.herokuapp.com/) in Internet Explorer 11 (which is created in [this article](https://medium.com/javascript-in-plain-english/how-to-optimize-react-app-for-production-and-deploy-it-to-heroku-498fbf222de?source=friends_link&sk=9a2b48e4cafe7aaeca2cbd6f398d4f5d))

You will see that the page is blank, and if you open the console you will see an error saying "Promise is undefined"

![ES6 to ES5](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/2b98f7c7ada057560015dbe98fd4034e8c6b5bef/transpiler_5.png)

Now, if you open [this application](https://my-node-react-app-upgraded.herokuapp.com/) in Internet Explorer 11, which has added support for babel polyfill, you can see that the application works fine and the redux store data is correctly getting displayed in the console.

![ES6 to ES5](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/2b98f7c7ada057560015dbe98fd4034e8c6b5bef/transpiler_6.png)

So always make sure to add babel polyfill to support older browsers.
That’s it for today. I hope you learned something new.

I hope you've been enjoying my articles and tutorials I've been writing. If you found them useful, consider buying me a coffee! I would really appreciate it.

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)

**Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox [here](https://yogeshchavan.dev/).**