ERROR in build.js from UglifyJs Unexpected token: punc (()

Question

I have developed an application on my local. The client and server run on different ports. The application runs fine on my local system. I have now pushed the code onto the server. When I try running the code using npm run build.

I get an error that looks like this

My urlMixin.js looks like this

let path = require('path');

let webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
},
module: {
    rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {}
                // other vue-loader options go here
            }
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        }
    ]
},
resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
    },
    extensions: ['*', '.js', '.vue', '.json']
},

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:3000'
        }
    },
    historyApiFallback: true,
    noInfo: true
},
performance: {
    hints: false
},
devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
     module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: '"production"'
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
            warnings: false
        }
    }),
    new webpack.LoaderOptionsPlugin({
        minimize: true
    })
])
}

Is there something wrong with my webpack? What wrong am I doing? Can someone please help me out?

Similar: https://stackoverflow.com/questions/43598037/error-in-renderer-js-from-uglifyjs-unexpected-token-punc?rq=1 — CertainPerformance, May 04 '18 at 23:20
Also similar: [https://stackoverflow.com/questions/42375468/uglify-syntaxerror-unexpected-token-punc](https://stackoverflow.com/questions/42375468/uglify-syntaxerror-unexpected-token-punc). And it looks like the [most upvoted answer](https://stackoverflow.com/a/46294198/1206267) probably has what you're looking for — Ohgodwhy, May 05 '18 at 03:47

score 3 · Answer 1 · answered Jun 27 '18 at 14:55

A change from

  new webpack.optimize.UglifyJsPlugin()

to

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
[...]

  new UglifyJSPlugin()

with npm install --save uglifyjs-webpack-plugin fixes it. https://github.com/webpack/webpack/issues/5858#issuecomment-338430720

score 0 · Answer 2 · answered Apr 22 '20 at 18:07

I think you need to add the presets option in the js rule section of your webpack.config. Below is a sample snippet for js rule:

{
  test: /\.m?js$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  },
  exclude: [/node_modules/]                                                           
}

This error in UglifyJs plugin mostly happens when the file is in es6 or newer versions. I think UglifyJs plugin is not working on js versions newer than es5 and we need presets to add required plugins to transpile it to older versions.

ERROR in build.js from UglifyJs Unexpected token: punc (()

2 Answers2