Fix TypeError: sym.definition is not a function

in Code Write a comment

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.


Hi, I'm Renat 👋

 


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 arrayhow to add a class to body tag in Vue.js, How to hide uncompiled mustache {{ code }} in Vue.js and other Vue.js tutorials.

A collection of UI components for
Bootstrap 4/5 and Vue.js

Get now

Write a Comment

Comment