Yomi
Yomi
Jun 5, 2018 · 1 min read

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?

tiltblog

The TILT (Things I Learnt Today) blog is a collection of short programming and design how-tos based on day to day learnings.

Thanks to Olayinka Omole

Yomi

Written by

Yomi

JavaScript Developer. Wannabe Designer and Chief Procrastinator at Selar.co and Worklogs.co

tiltblog

tiltblog

The TILT (Things I Learnt Today) blog is a collection of short programming and design how-tos based on day to day learnings.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade