ERROR in bundle.js from UglifyJs

Question

I finished the project, and now it's time to build it. I use a template project and still do not fully understand all the npm / webpack stuff that happens under the hood. When starting "npm start" I get an error message:

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

After an hour of searching the Internet for this issue, I still cannot solve it. In my opinion, this problem occurs because Uglify does not like ES2016 yet. However, the solutions I found on the Internet do not seem to work or do not make enough sense for me.

I found this question https://stackoverflow.com/a/4129609/ and I changed the line webpack in the project.json file of the project:

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

But that did not work. Another suggestion is that the forking web package is in my understanding at the moment.

I also tried to run babel in my src folder for another sentence, but that didn't seem to do anything, or I did not start it correctly.

Does anyone have a good solution to this problem? I was pretty stuck at the moment and did not have time to learn npm / webpack from scratch to fully understand what was happening.

Very valuable!

Answer 1

Yes, UglifyJS only supports ES5 syntax. You will need to properly configure Babel to convert your sources to ES5 syntax.

Since you are using Webpack 2, the Babel configuration with the minimum minimum you need is:

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

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

Alternatively, you can try babelify , which is a Babel modern minifier that supports ES6 syntax. If you are aiming for new releases, I would heartily recommend it.

Answer 2

This answer may be deprecated, see comments on my other answer here .

Just teach UglifyJS ES6

There are two versions of UglifyJS - ES5 and ES6 (Harmony), see git
The ES5 version comes by default with all plugins, but if you install the Harmony version explicitly, these 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 the webpack plugin, you must install and use it explicitly. This replaces the built-in 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 information about the web package, see
https://github.com/webpack-contrib/uglifyjs-webpack-plugin#install
https://github.com/mishoo/UglifyJS2/tree/harmony

Answer 3

try my cfg, relevance, I will find the answer at 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 4

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

 { "presets": [ "es2015" ] } 

Answer 5

 npm i -D uglifyjs-webpack-plugin@1.3.0 

Add this at 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 } } ),