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?

Also similar: https://stackoverflow.com/questions/42375468/uglify-syntaxerror-unexpected-token-punc. And it looks like the most upvoted answer probably has what you're looking for — Ohgodwhy
– Ohgodwhy, Commented May 5, 2018 at 3:47

Laurent Debricon · Accepted Answer · 2018-06-27 14:55:24Z

3

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

answered Jun 27, 2018 at 14:55

Laurent Debricon

4,5772 gold badges27 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amir Shirazi · Accepted Answer · 2020-04-22 18:07:56Z

0

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.

answered Apr 22, 2020 at 18:07

Amir Shirazi

83610 silver badges9 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related