20

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 <pedro.ladaria@gmail.com>
 * 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.

BlackHoleGalaxy
  • 9,160
  • 17
  • 59
  • 103
  • 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 :) – Andrey Popov Oct 03 '18 at 08:16
  • https://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`. – whbb Dec 11 '18 at 06:36
  • What was the solution? – dyesdyes Mar 01 '19 at 10:56
  • don't have any yet – BlackHoleGalaxy Mar 01 '19 at 15:40

1 Answers1

7

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.

Molemann
  • 418
  • 5
  • 10
  • 1
    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']` – NikitaK Jun 07 '19 at 14:59
  • Couldn't upvote this more :) It took a day to find this. – beerwin Oct 28 '19 at 14:25
  • 1
    @NikitaK 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. – Molemann May 12 '20 at 13:19
  • 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 – se22as Jun 29 '20 at 17:45
  • @se22as Could you share youre babel.config.js and vue.config.js files ? – Molemann Jul 02 '20 at 09:26
  • @se22as 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[] – Molemann Jul 07 '20 at 13:47
  • @Molemann 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. – se22as Jul 09 '20 at 08:47
  • @Molemann 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. – se22as Jul 09 '20 at 09:08
  • with the transpiledependencies listed above my console is showing me the error *[Vue warn]: Error in created hook: "ReferenceError: 'Promise' is undefined"* – se22as Jul 09 '20 at 09:10
  • @se22as 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. – Molemann Jul 10 '20 at 13:34
  • 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 – se22as Jul 16 '20 at 15:51
  • @se22as No problem, glad to be of assistance. – Molemann Jul 24 '20 at 10:48
  • @Molemann 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 https://github.com/se22as/test-vue-masonry – se22as Sep 02 '20 at 14:25
  • I'll spin u[p a sandbox based on the code and have a dig when I get a chance. – Molemann Sep 11 '20 at 09:27