10

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!

Community
  • 1
  • 1
Charlie Harrison
  • 135
  • 1
  • 1
  • 7
  • What boilerplate exactly and what is in package.json under npm start? – Jason Livesay Dec 21 '16 at 03:38
  • https://github.com/developit/preact-boilerplate And the package.json file can be found at the above link. Thanks! – Charlie Harrison Dec 21 '16 at 03:49
  • 1
    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. – Jason Livesay Dec 21 '16 at 04:00
  • 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. – Jason Livesay Dec 21 '16 at 04:01
  • 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. – Charlie Harrison Dec 21 '16 at 07:37

6 Answers6

11

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.

Filip Dupanović
  • 32,650
  • 13
  • 84
  • 114
  • Adding your code brought me to a new error. 'code' Unexpected token import: import webpack from 'webpack'; 'code' – Charlie Harrison Dec 21 '16 at 16:44
  • 1
    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. – Filip Dupanović Dec 21 '16 at 20:29
4
npm i -D uglifyjs-webpack-plugin@1.3.0

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
                }
        }
    ),
4b0
  • 21,981
  • 30
  • 95
  • 142
Krishna Gawali
  • 51
  • 2
  • After a little playing I found that ```sourceMap: true``` must be outside of the uglifyOptions object for it to work. For more help see: https://www.npmjs.com/package/uglifyjs-webpack-plugin/v/1.3.0 – Paul Pritchard Oct 25 '22 at 11:39
2

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

Qwerty
  • 29,062
  • 22
  • 108
  • 136
2

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"]
                    }
                }
            },
congzhaoyang
  • 21
  • 1
0

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

{
 "presets": [
    "es2015"
 ]
}
Carlos Aleman
  • 101
  • 3
  • 11
0

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}),
Prashant Yalatwar
  • 159
  • 1
  • 3