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!

Crosslegged

What boilerplate exactly and what is in package.json under npm start? – Kaylee

github.com/developit/preact-boilerplate And the package.json file can be found at the above link. Thanks! – Crosslegged

I suggest you start over with a bare project, no boilerplate, and build it up slowly to the minimum complexity needed. If not, you will need to learn how to debug the build system. Its like debugging a program, only its a series of commands/programs being run in the shell. – Kaylee

Even if someone fixes this exact problem, you will be screwed having a project that you don't understand how it works. You might go back to the babel problem and post a new question with those details. But better to start from scratch with something simple. This is why I don't recommend boilerplate projects. – Kaylee

I definitely intend on going back to the super basics and learning about npm, webpack, package.json's, etc. I was really hoping that I could resolve this issue without having to do that but if nobody has any ideas, then that is what I shall do. – Crosslegged

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.

Muscadine

Adding your code brought me to a new error. 'code' Unexpected token import: import webpack from 'webpack'; 'code' – Crosslegged

Remember, Node.js provides a CommonJS environment which doesn't support ES6 modules. Revert to using plain require() in your Webpack configuration file and you'll have support for other ES6 features (Node 6 and Node 7 are 97% compatible with the spec). Otherwise, you'll need to either manually configure Babel's runtime for Node.js or babel-loader, because the settings will conflict. – Joby

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
                }
        }
    ),

Ricard

After a little playing I found that sourceMap: true must be outside of the uglifyOptions object for it to work. For more help see: npmjs.com/package/uglifyjs-webpack-plugin/v/1.3.0 – Candlepin

this worked for me, there was a library with external plugin using webpack 5 which was not working for me earlier – Tillis

Answer 3

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

Credible

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

Molini

Answer 5

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

{
 "presets": [
    "es2015"
 ]
}

Tapis

Answer 6

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}),

Nicodemus