ERROR in bundle.js from UglifyJs

Question

I've completed a project and now it's time to build it. I'm using a boilerplate project and still don't fully understand all the npm/webpack stuff going on under the hood. When running "npm start", I'm receiving the error:

ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token: punc ()) [bundle.js:848,29]

After an hour of searching the internet on this issue, I'm still unable to resolve it. From my understanding, this issue is happening because Uglify doesn't like ES2016 yet. However, the solutions I found on the internet don't seem to be working or don't make enough sense for me to implement.

I found this stackoverflow question and changed the webpack line in my project's package.json file to:

"webpack": "fulls1z3/webpack#v2.1.0-beta.27-harmony"

But this didn't work. The other suggestion of forking webpack is beyond my understanding at the moment.

I also tried running babel on my src folder per another suggestion but that didn't seem to do anything or I ran it incorrectly.

Does anyone have a nice solution to this issue? I'm pretty stuck at the moment and haven't had time to learn npm/webpack from the ground up to fully grasp what's going on.

Much appreciated!

Answer 1

Yes, UglifyJS only supports ES5 syntax. You'll need to correctly configure Babel to transform your sources down to ES5 syntax.

Since you're using Webpack 2, the bare-minumum Babel configuration that you need is:

{
  "presets": [
    ["es2015", {"modules": false}]
  ]
}

This will require the babel-preset-es2015 preset. Throw the above in a .babelrc and your babel-loader will take care of the rest.

Alternatively, you can try babelify, which is Babel's modern minifier that supports ES6 syntax. If you're targetting newever releases, I would heartily recommend.

Answer 2

npm i -D [email protected]

Add this on the top of your webpack.conf:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

And replace this:

new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
            warnings: false
        }
    }),

By this:

new UglifyJsPlugin({
            "uglifyOptions":
                {
                    compress: {
                        warnings: false
                    },
                    sourceMap: true
                }
        }
    ),

Answer 3

try my cfg，actuality，i find the answer in https://github.com/joeeames/WebpackFundamentalsCourse/issues/3

npm install babel --save-dev

npm install babel-preset-es2015 --save-dev

            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ["es2015"]
                    }
                }
            },