IE11 throws “syntax error” with Nuxt.js builds

Ok, this is not strictly Nuxt.js related, but we wanted to share it so hopefully we save a fellow developer a few minutes.

Quick tip of the day

Today we encountered something that tripped us up for a bit and

We’re currently using Vue.js coupled with Nuxt.js to build a set of static websites for one of our clients in the education space. We’ve built a library of Vue.js components which we then require from the Nuxt project as an external npm package.

We came to a point where one of our Nuxt plugins had to explicitly import some files from the source of our library, which at the time was located in node_modules/@company/library/src/utils/. So we would do something like:

// plugins/some-plugin.jsimport DOMUtils from '../node_modules/@company/library/src/utils/DOMUtils';... other code ...

Respectively our DOMUtils file contained a number of ES6 arrow functions:

//@company/library/src/utils/DOMUtilsconst helperFunction = () => {
... magic ...
}

Then we would do


yarn generate

and upload the resulting bundle from dist/ to an AWS S3 static website bucket.

Unfortunately our beloved Internet Explorer 11 (IE11, the only version of IE we tend to support) would throw a non-descriptive and obscure syntax error .

This is caused by ES6 code ending up in the js bundle, and IE11 doesn’t support ES6 (Edge, latest Chrome, Firefox and Safari are fine though). As the file is coming from the vendor directory of the Nuxt project, it automatically excludes all files in node_modules/ from the babel ES6 => ES5 transpilation.

The fix?

Adding a transpile key to nuxt.config.js ‘s build field:

build: {

transpile: [
/(.+)(@company\/library\/src\/utils\/)(.+)(\.js)$/, // Transpile Unix paths for all utils files
/(.+)(@company\\library\\src\\utils\\)(.+)(\.js)$/ // Transpile Windows paths for all utils files
],
... other config ...
}

As a bonus tip, be careful when transpiling on a Windows machine, as paths use backward slashed, as opposed to Unix-based forward slashes.

Interested in working with BetaPeak to help build, scale or maintain your web & mobile apps? Check what’s on offer!

Written by

Founder of BetaPeak (https://betapeak.com), a software engineering agency, focused on helping seed and early stage startups get their products off the ground.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store