CODEWITHSUNDEEP
javascriptnode.jsnpmwebpackuglifyjs
Charlie Harrison
Charlie Harrison

Reputation: 145

ERROR in bundle.js from UglifyJs

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!

Upvotes: 11

Views: 36700

Answers (6)

Prashant Yalatwar
Prashant Yalatwar

Reputation: 179

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

Upvotes: 0

Qwerty
Qwerty

Reputation: 32018

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

Upvotes: 2

Krishna Gawali
Krishna Gawali

Reputation: 71

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

Upvotes: 6

Carlos Aleman
Carlos Aleman

Reputation: 119

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

{
 "presets": [
    "es2015"
 ]
}

Upvotes: 0

congzhaoyang
congzhaoyang

Reputation: 21

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

Upvotes: 2

Filip Dupanović
Filip Dupanović

Reputation: 33690

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.

Upvotes: 11

Related Questions