I recently came across an issue while working on a Vue project at work. It was a Vue project generated with
vue-cli using the Webpack template.
I was trying to run the
build process for the project and I always ran into this issue.
Basically, the error here is that Uglify is having difficulties working with ES6 code and this is happening because the VueCollapse npm package is written in ES6.
I’m sure you’re thinking, “Hmm, I thought Babel takes care of transpiling ES6 to ES5 under the hood”. Well, apparently, Babel skips JS files inside the
node_modules folder which resulted in the error.
So how do we fix?
We can fix this by including the source file of the Vue plugin in the Webpack config file so that it’s taken care of by Babel and transpiled to ES5.
We can do this by navigating to the
webpack.conf.js file inside the
build folder and edit it like the example below.
With the code block above, Babel knows to also transpile the Vue package.
There you have it. Have you also encountered this issue? How did you fix it?