Webpack UglifyJS running into unexpected token

Question

I am trying to set up a development boilerplate which can also easily push a Vue.js project to NPM.

I am running into a problem with my webpack.prod.js file, the error is:

ERROR in build.js from UglifyJs
Unexpected token: operator (>)

The code to uglify is:

// minify with dead-code elimination
new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    }
})

This is my project and the exact file where it seems to go wrong:

https://github.com/stephan-v/vue-inline-svg/blob/master/webpack/webpack.prod.js

The project uses Babel to transpile to ES6 and Webpack to compile to UMD format when I run npm run production. This command uses the webpack.prod.js configuration.

I am probably not seeing something that could be fixed easily but I have no clue what is going wrong here.

Without the `UglifyJsPlugin` everything works fine. I have not actually tested the UMD file by importing it but it compiles fine without the plugin, so that is not the issue. — Stephan-v, Jul 26 '17 at 08:33
Similar answers: https://stackoverflow.com/questions/43888474/unexpected-token-operator-from-uglifyjs — Scott Blanch, Jul 26 '17 at 08:47
I've added the exact same `.babelrc` file from the `webpack-simple` repo of `vue.js` it works perfectly fine now. I will check out what it does exactly though. — Stephan-v, Jul 26 '17 at 09:14

Stephan-v · Accepted Answer · 2017-07-26T09:57:44.343

Using the .babelrc file from the webpack simple repository fixed my issue. I am not sure what is going on here though:

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

To my knowledge the .babelrc contains the plugins and options that tells babel how to transpile my code.

I revied what the modules option exactly is:

https://babeljs.io/docs/plugins/preset-env/#optionsmodules

It said the following:

"amd" | "umd" | "systemjs" | "commonjs" | false, defaults to "commonjs".

Enable transformation of ES6 module syntax to another module type.

Setting this to false will not transform modules.

Because I want my package to be available to all users and my webpack production configuration uses:

libraryTarget: 'umd'

To compile my code to umd formatting, will this not conflict with "modules": false though?

I am also used to seeing a es2015 preset in the .babelrc file. This is nowhere to be found. Is this the default now?

It seems the es2015 option has been entirely removed:

https://github.com/vuejs-templates/webpack/commit/424cd3f6d101ffeb57f48bca55d7951b35af60e0

From what I've read so far it is because Webpack 2 already knows how to work with ES6 modules natively therefore the "modules": false disables and prevents babel from transpiling as well.

Feel free to leave a comment and correct me on any of this. I am saving this for future reference and for others to see who might also stumble into this.

Webpack UglifyJS running into unexpected token

1 Answers1