Vue CLI 3 does not convert vendors to ES5

Question

We have a vue-cli 3 project. It works pretty well and compiles without problem.

The fact is we have to support old browser supporting ES5 code only.

In the project we integrated some external libraries written in ES6 (reconnecting-websocket is an example).

Problem

After compiling our project with these externals, then the produced code by vue-cli has ES6 code.

For example our chunk-vendors.js has this code:

/*!
 * Reconnecting WebSocket
 * by Pedro Ladaria <[email protected]>
 * https://github.com/pladaria/reconnecting-websocket
 * License MIT
 */const o=()=>{if("undefined"!==typeof WebSocket)return 
WebSocket},a=t=>"function"===typeof t&&

with an ES6 fat arrow function const o=()=>{. So running this code in old browser breaks.

Here is our .browserlistrc file as it seems to be the recommanded way to add browser support in Vue CLI 3:

> 1%
last 2 versions
not ie <= 8
Android >= 4

It seems vue CLI transpiles the app code in ES5 properly. But it doesn't do another pass on vendors.

Is there any way to configure vue project, using CLI v3, to make a final transpile pass AFTER the build to make sure the files are all ES5 compatible?

We thought embedded babel and webpack would do it automatically but it seems it's not the case.

We tried to use the transpileDependencies option in vue.config.js but it didn't change anything and fat arrows were still there in the vendor chunk.

Pigheaded

In the old Vue versions, there was this webpack.base.config.js, in which you had defined webpack modules. So there was this rule: test: /\.(js|vue)$/, include: [resolve('src'), resolve('test')], and typically people would put node_modules there. But transpiling becomes super slow this way. I would love to know how this works now :) – Bloodhound

github.com/vuejs/vue-loader/issues/1411 this issuse may solve your problem. You need change babel config file from .babelrc to babel.config.js. – Iodic

What was the solution? – Lair

don't have any yet – Pigheaded

Answer 1

Create a file called babel.config.js in the same directory as your vue.config.js file.

In this file your going to want to add :-

process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;
module.exports = {
  presets: ["@vue/app"]
};

This should now use babel to transpile external modules.

This should be used in conjunction with the transpileDependencies option in vue.config.js.

Irving

It works! But one little problem: you should list (in babel.config.js) every dependency you want to transpile: transpileDependencies: ['dateformat', 'query-string', 'strict-uri-encode', 'split-on-first'] – Silda

Couldn't upvote this more :) It took a day to find this. – Sible

@Silda the babel.config.js would not be the correct place for this, as stated in my original answer you should list dependencies to transpile in the vue.config.js file using the transpileDependencies option as documented. – Irving

This is unfortunately not working for me. in babel.config.js i have the VUE_CLI_BABEL_TRANSPILE_MODULES variable, and present of "@vue/app" just like @Molemann's answer here. In my vue.config.js i have the transpileDependencies (i have tried both '/node_modules/vue-masonry/', and 'vue-masonry' formats). I also have "IE 11" listed in package.json under browserslist – Quirinal

@Quirinal Could you share youre babel.config.js and vue.config.js files ? – Irving

@Quirinal I'm not sure why ur using absolute paths to the modules in your transpile dependencies option. You only need to list the module names in the form of a string[] – Irving

@Irving Sorry I didn't know you can format comments!! I also noticed in my previous post i had incorrect testing code so deleted my comment. I had tested using the absolute path to dependencies & just the names, so i had both in my transpile dependencies by mistake Here is what i am testing with now module.exports = { publicPath: '/mydemoapp/', transpileDependencies: [ 'vue-masonry', 'masonry-layout', 'imagesloaded', ], }; This unfortunately is still not working in IE. My app shows a spinner until it gets the data, on IE it only ever shows the spinner. – Quirinal

@Irving How do you determine what to put in the transpileDependencies? It possible i have the wrong values. Do you add the child dependencies listed in package-lock.json for everyone of your dependencies. EG "dependencies" in package.json are ` "dependencies": { "core-js": "^3.6.5", "regenerator-runtime": "^0.13.5", "vue": "^2.6.11", "vue-masonry": "^0.11.8", "vue-router": "^3.1.5" },` only "vue-masonry" has child deps in package-lock.json whjich are "imagesloaded","masonry-layout" and "vue" which is why i put the 1st 2 in the transpileDependencies. – Quirinal

with the transpiledependencies listed above my console is showing me the error [Vue warn]: Error in created hook: "ReferenceError: 'Promise' is undefined" – Quirinal

@Quirinal do you have discord or a way to message in real time and I can help you debug this. It sounds like your having other issues here, the error regarding Promise being undefined on a created hook is likely unrelated to dependency transpilation. – Irving

Weirdly when i looked at it again today its working. The only change i have is in babel.config.js have useBuiltIns: 'usage', I also removed my "node_modules/.cache folder and kept restarting IE. So i am not sure if it was caching issues i wasa seeing. Thank you for all your help @Moleman – Quirinal

@Quirinal No problem, glad to be of assistance. – Irving

@Irving actually I was incorrect and my app is still not working. My previous reply saying it was working was me mistakingly testing my React or Angular version of the same app. I have reproduced this issue with a very simple masonry test app and put it on my github account github.com/se22as/test-vue-masonry – Quirinal

I'll spin u[p a sandbox based on the code and have a dig when I get a chance. – Irving