Webpack: Unexpected token with Uglify

[MadsRC]

I'm getting the following error when trying to build for production (No problem with building for dev)

ERROR in static/js/vendor.d98368c92c87b257a0a0.js from UglifyJs
Unexpected token operator «=», expected punc «,» [./node_modules/timeslotjs/timeslot.js:6,0][static/js/vendor.d98368c92c87b257a0a0.js:16760,39]

The timeslotjs library is basicly using a default parameter in a function, which is a ES6 feature that UglifyJS2 doesn't support.

I'm not sure how to best solve this.
One way to solve it is to update the template to use uglify-es, instead of uglify-js.

Another solution is to update the template/webpack config to have babel transpile ./node_modules/timeslotjs/timeslot.js.

The problem that I see is that if the file/library isn't transpiled, the end-users browser would have to support ES6, no? Thus it might not be optimal to use uglify-es instead of uglify-js.
On the other hand, I'm not sure if it's "correct" to have babel transpile something from node_modules?

Is there another way to do it, maybe during build, the module is copied to assets?

Thoughts?

[czerasz]

I use the EventEmitter module and I face a similar issue:

ERROR in static/js/vendor.11a3c006c10e183eb4a0.js from UglifyJs
Unexpected token: name (EventEmitter) [./~/EventEmitter/src/index.js:16,0][static/js/vendor.11a3c006c10e183eb4a0.js:53528,6]

I guess it's because of this line - the module uses:

export default class EventEmitter

[myst729]

If you are using an npm package written in ES6, it fails because:

1. Babel skips JS files under "node_modules" folder.
2. UglifyJS cannot handle ES6.

Possible solutions:

1. You can force babel to not skip "node_modules", so it could be transpiled to ES5.

   https://github.com/vuejs-templates/webpack/blob/master/template/build/webpack.base.conf.js#L51

     {
       test: /\.js$/,
       loader: 'babel-loader',
       include: [
         resolve('src'),
         resolve('test'),
         resolve('node_modules') // or a more specific path to the package
       ]
     },
   

2. Maybe you are importing the source code of the package, which is in ES6. You could checkout its docs or readme, to see if the package provides an ES5 bundle.

[hackuun]

I don't understand why this issue is closed? I have the same error with 2 other packages.

@myst729 1 solution doesn't work. I got tons of this kind of messages

⠸ building for production...[BABEL] Note: The code generator has deoptimised the styling of "/home/***/Documents/WORK/EXAMPLES/vue-examples/node_modules/lodash/lodash.js" as it exceeds the max of "500KB".

And then I wait 5 minutes and cancel building. It's just freezes.

[LinusBorg]

I don't understand why this issue is closed?

Because @myst729 explained how to solve the issue.

The only general solution in this template would be to have babel transpile all code from /node_modules by default, which would make even small builds incredibly slow.

For that reason, we will continue to skip transpilation for anything in node_modules by default.

I got tons of this kind of messages

⠸ building for production...[BABEL] Note: The code generator has deoptimised the styling of "/home/***/Documents/WORK/EXAMPLES/vue-examples/node_modules/lodash/lodash.js" as it exceeds the max of "500KB".

That's a totally different error (or rather: "Notes", as the message itself said) than the one discussed in this issue, so it's expected that @myst729 's solution doesn't "work".

[alernerdev]

I have the same issue with uid-generator

[LinusBorg]

Well, the solution was provided, just add the path to babel-loader config.