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

make sure you have added the .babelrc file to the root of your folder and that it contains this

{
 "presets": [
    "es2015"
 ]
}

Answer 3

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 4

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"]
                    }
                }
            },

Answer 5

In my case i did changed sourceMap:false So error came like

ERROR in index.bundle.js from UglifyJs

TypeError: Cannot read property 'sections' of null.

Now when i change sourceMap:true.

It worked fine.

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

Answer 6

This answer might be outdated, see comments on my other answer here.

Simply teach UglifyJS ES6

There are two versions of UglifyJS - ES5 and ES6 (Harmony), see on git
ES5 version comes by default with all the plugins, but if you install a Harmony version explicitly, those plugins will use it instead.

package.json

"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"

or

npm install --save uglify-js@github:mishoo/UglifyJS2#harmony

yarn add git://github.com/mishoo/UglifyJS2#harmony --dev

UglifyJS WebPack plugin

If you want to control the version of webpack plugin, you must install and use it explicitly as well. This replaces the built webpack.optimize.UglifyJsPlugin

npm install uglifyjs-webpack-plugin --save

yarn add uglifyjs-webpack-plugin

Webpack configuration file

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

module.exports = {
  entry: {...},
  output: {...},
  module: {...},
  plugins: [
    new UglifyJSPlugin()
  ]
};

---

For more webpack info see
https://github.com/webpack-contrib/uglifyjs-webpack-plugin#install
https://github.com/mishoo/UglifyJS2/tree/harmony