Fix TypeError: sym.definition is not a function

Solving annoying Webpack build problem while using UglifyJs.

A few days ago I was making a few changes on already live Vue.js project. One of the tasks was adding a content slider.

I installed vue-awesome-swiper it worked like a charm but when I run a build script it threw an error:

ERROR in static/js/app.5a49e1c0e01691e76c41.js from UglifyJs
TypeError: sym.definition is not a function

I tried upgrading uglify-es and uglifyjs-webpack-plugin to the latest versions (I was on 3.3.10 and 1.2.4 respectively). No luck.

Downgrading didn’t help either.

So the only option was to find an alternative package.

Solution

I’m glad that I came across terser-webpack-plugin. This npm package is well maintained and works well with ES5/6.

Install it with the following command:

npm install terser-webpack-plugin --save-dev

Replace UglifyJs with TerserPlugin in your webpack production config file.

const TerserPlugin = require('terser-webpack-plugin')
// ...

optimization: {
  splitChunks: false,
  minimize: true,
  minimizer: [new TerserPlugin()]
}

Now you’re all set.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/fix-sym-definition-is-not-a-function

PS: You can also check how to get the first item in Vue.js array, how to add a class to body tag in Vue.js, How to hide uncompiled mustache {{ code }} in Vue.js and other Vue.js tutorials.