Making Nuxt.js web apps compatible with IE11 (Only about Javascript)

This post was moved from Medium (https://k5trismegistus.medium.com/making-nuxt-js-web-apps-compatible-with-ie11-only-about-javascript-83f5bbcbe3c8)

Overview

Nuxt.js will generate code which can run on IE9, but this is only for Nuxt.js itself and the code you write, but not for external libraries.

So you need to configure them yourself as long as you use external libraries.

I’ve seen a lot of how-to articles that say that external libraries need to be transpiled, so let’s set them up!

But I couldn’t find anything that answered the question of which one I should do, so I tried to do it myself.

I’m going to add libraries that use the new notation to the transpile list, and load the script for Polyfill.

(What is transpiling and Polyfill is attached at the end of this article.)

Let’s start with the following.

Introducing Polyfill

At polyfill.io, there is a useful site that returns the required Polyfill code for the accessing browser.

You can select features to be polyfilled.

https://polyfill.io/v3/url-builder/

But it’s hard to look up which features need to be polyfilled one by one, so you should load them all together.

If user isusing a modern browser like Firefox or Chrome, and user has updated it properly, user will get empty files back

User have to wait a little more to download that file, but user shouldn’t have any problems with Polyfill overwriting browser-supported features.

export default {  ...  head: { ...    script: [...      { src: 'https://polyfill.io/v3/polyfill.min.js' } // add this    ],  },  ...}

I think I don’t have to do this because Nuxt.js must use polyfill in nuxt build to generate code that is compatible with IE9, but I couldn’t find the way to apply polyfill to external libraries…

Transpiling external libraries

Unlike Polyfill, this one is a bit more difficult.

To include a library in the transpile target, simply write the library name in nuxt.config.js as follows. You can also use a regular expression to specify a group of libraries with a specific pattern of names.

export default {  ...  build: { ...    transpile: ['vuetify'], { ...  },  ...}

At first I thought I’d take the easy way out and put

transpile: [/. +/]  // You can use regex

but sadly, the current project broke even in Chrome. Also, the build time got quite long. You shouldn’t do that…

So, you should detect which libraries must be transpiled one by one, but it was hard way.

Since I didn’t have a Windows testing machine, I could only borrow a Windows PC from my colleague and have access to production build from it.

This is why I had to do something a bit complicated.

Detect which libraries must be transpiled

1. Find the syntax error in IE

Open the page using IE in the production environment.

Open the console of the developer tools and look at the line that is causing the error to see what is happening.

If the error is SCRIPT1002, see if there are any arrow functions or class being used.

The following article was very helpful in identifying the error. (Written in Japanese, you can use translator)

https://qiita.com/siruku6/items/3465fd6e0588ee35cc78

2. Find what library cause syntax error

Start up the Nuxt server in dev mode and access it with Firefox or Chrome.

Analyze the file _nuxt/vendors/app.js, which is a collection of bundled external libraries.

For example, if the arrow function => is causing problems in IE, find the place where the arrow function is used, and look a few lines above it to find the name of the original library.

In the example below, the library named ansi-regex looks suspicious.

Once you know the name, add this library to the target of the nuxt.config.js transpile as before.

Reload and check that the arrow function that was there earlier is gone.

3. repeat steps 1 and 2

It would be nice if all the errors came out in step 1, but we can only find the first non-IE syntax.

I dealt with each one one by crushing the arrow function, then crushing the class, then the next, and so on.
This is what I did, I hope this will help anyone!

Prerequisite knowledge: Transpile and polyfill

To make new Javascript compatible with older browsers, there are two things to do.

One is “transpile”. Transpiling is to rewrite code with the NEW Javascript syntax that would cause syntax errors (ex. Arrow functions)to the old Javascript for the purpose browser’s Javascript interpreter.

For example,

() => {  [1, 2, 3].map(e => console.log(e * 2))} // Arrow function

will be transpiled into

(function () {  [1, 2, 3].map(function (e) {    return console.log(e * 2);  });});

The other is Polyfill. Polyfill will give support of features that is syntactically correct but does not work.

For example, Array.prototype.includes.

[1, 2, 3].includes(3)

Above code is syntactically correct, but don’t work in old browser.

Polyfill code will inject new methods in Array.prototype and make above code work.

I was going to post an example, but it was too long.

https://polyfill.io/v3/polyfill.js?features=Array.prototype.includes

You can see it by accessing with IE or wget.