Your Vue.JS / React Code Throws Errors in IE11 And You Don't Know What To Do?

16 Aug · by Tim Kamanin · 2 min read

I hope this post will help someone who works on the Vue.JS or React code and the app keeps throwing errors in IE11 despite all transpilers, precompilers, polyfills and voodoo magic you've already applied to it.

You've lost your hair, and you hate your job, you're googling the Darknet for XYZ. Stop!

My advice, check the code inside dist directory whether it has any arrow functions =>. Often they're the source of the problem.

IE11 doesn't support arrow functions, and polyfills won't fix that problem. If you use babel-env (and you should use it), given the right browser target, it should automatically convert arrow functions to regular functions, but it will do this only for your code and not for dependencies you've installed via npm.

Solution 1:

So you need to find the offending modules that leave arrow functions and add those modules to your transpilate pipeline.

In Vue Cli 3 generated project it's as easy as adding vue.config.js file with the following contents:

module.exports = {
  transpileDependencies: ["name_of_npm_module_i_want_to_transpile"]

Solution 2:

A quick win can be gained by checking whether you have query-string package in your node_modules. It's a common offender. To solve the problem caused by query-string without additional transpilation dancing, make sure you have version 5 of the library installed:

npm install query-string@5

I lost almost a day before I figured this all out. I hope I've saved your day, my friend.

best, Tim.

Want to get more 🔥 tips like this one?

Subscribe to get notified about new dev tutorials