Why does my ReactJS app not able to render in IE11?

Why does my ReactJS App does not support IE? If you experience this issue, continue reading this article, as you might find a common issue and solution to your similar issue.

Recently one of my ReactJS App was unable to be supported in IE11, what a heck? This has been a nightmare to me, my team, and my customer. The page just didn’t load at all.

Well, thanks for the IE Developer Tool, we can get limited hints about what happen. Below is the screenshot of what is shown in the IE Developer Tool.

main.90e7c84b.chunk.js, what is that, man?

Let’s dig in further, this is what I saw

Mmm, pretty hard to troubleshoot. But, wait, there is something that catches my attention, the arrow function. Based on https://caniuse.com/#feat=arrow-functions, IE does not support Arrow Functions (At All).

Allright, we know the issue, so what now. we still wants to use Arrow Function, and even more, we may not want to change the code, as the issue lies on the nodes_modules, not within the scope of our hands.

Look at this https://stackoverflow.com/questions/52821427/javascript-babel-preset-env-not-transpiling-arrow-functions-for-ie11. We can actually transpile the Arrow Functions which is supported by ES6 to be standard function, like in ES5.

This is the devDependencies that you need https://www.npmjs.com/package/@babel/plugin-transform-arrow-functions

Well, do we really need to include that babel plugin, and the rest of other plugins, as we need? Is there any pre-packaged set of plugins, prepared by community, based on their best-practices. The answer is YES, babel-preset. We are going to use preset-env. A bit of sharing here https://blog.jakoblind.no/babel-preset-env/.

So, here is how we change our code.

First, add preset-ent in our webpack.config.js (refer to the changes on the right), and most-importantly, DO NOT exclude nodes_module, as we also need to transpile nodes_modules.

Then, add browserlists, this is used for babel transpiler to transform the code to support the browsers in browserlists file.

Well, finally issue is resolved.