Laravel-mix: UglifyJs: Unexpected token: operator (>)

[tillkruss]

When running npm run production I get the following error:

/js/listing.js from UglifyJs
Unexpected token: operator (>) [./~/bootstrap/js/src/dropdown.js:11,0][/js/listing.js:3302,23]

I've tried deleting node_modules without any luck, same goes for installing:

yarn add --dev git+https://github.com/mishoo/UglifyJS2.git#harmony

Arrow function seem to be the issue, line 11 of dropdown.js is:

const Dropdown = (($) => {

I don't have a .babelrc file.

[email protected]
Node: v7.9.0
NPM: 4.5.0
macOS: 10.12.4

[hernandev]

@tillkruss take a look at the exactly installed version of mix, i ran into this issue a couple of days ago and it was solved by both mix upgrade and #harmony branch of uglify.js

[tillkruss]

Shouldn't uglify work out of the box, since it's enabled by default in production?

[Shchepotin]

Same problem.

[suhaibmalik]

@hernandev I used to have it working about a month ago too using the harmony branch. However, they've since moved it to uglify-es and now I can't get it to work, again. What exactly do you have setup at the moment?

[robbyrice]

Running into this same problem and not having any luck fixing it. I've tried installing the harmony branch of uglifyjs and adding a .babelrc file with the es2015 preset, but nothing has worked.

[TheYorickable]

Same problem, adding .babelrc triggers new error.

[bbashy]

Getting the same when using a package that has => {}. Seems like UglifyJs is working on it https://github.com/mishoo/UglifyJS2/issues/448

[JeffreyWay]

I'm about to tag a new release that bumps the Uglify version, so I think that should fix this.

[tillkruss]

@JeffreyWay: Still the same error using 0.12.0.

[ipa1981]

@JeffreyWay still the same using 0.12.1

/js/app.js from UglifyJs
Unexpected token: operator (>) [./~/vue-strap/src/utils/utils.js:4,0][/js/app.js:28290,16]

[tillkruss]

@JeffreyWay: Could you re-open this until it's resolved?

[balthild]

Any updates?

[iraklisg]

@balthild, all upgrading to [email protected] solved the problem for me

[ipa1981]

@iraklisg Nope. upgraded to 1.0.7, still the same:

 ERROR  Failed to compile with 1 errors                              11:59:05 AM

 error  

/js/app.js from UglifyJs
Unexpected token: operator (>) [./node_modules/vue-strap/src/utils/utils.js:4,0][/js/app.js:28274,16]

[ruchern-chong]

@ipa1981 rm -rf node_modules directory, rm package-lock.json and npm install. See if that works.

When upgrading from 0.* to 1.* I had to do that to make things work.

Also, check if your npm is now 5.0.4. 5.0.3 had problems with some packages/dependencies not being installed.

[ipa1981]

@ruchern I use yarn . no package-lock here.

[ruchern-chong]

@ipa1981 Oh then your result may vary from mine. Well, you can still try to clear out the old packages and do a reinstall. Let me know if that worked.

[ipa1981]

@ruchern Just did it. Same problem:

$ rm -rf node_modules
$ rm yarn.lock
$ yarn install
yarn install v0.24.6
info No lockfile found.
[1/4] Resolving packages...
warning datatables.net-buttons-bs > [email protected]: Incorrect version published. Please use the latest non-deprecated version - 1.10.13 at the time of writing
[2/4] Fetching packages...
warning [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "[email protected]" has incorrect peer dependency "webpack@^2.2.0".
warning "[email protected]" has incorrect peer dependency "webpack@^2.2.0".
warning "[email protected]" has incorrect peer dependency "webpack@^2.2.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 43.75s.
$ yarn run production
yarn run v0.24.6
$ cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js 
 95% emitting                                                                            

 ERROR  Failed to compile with 1 errors                                                                                                                                                                  1:04:09 PM

 error  

/js/app.js from UglifyJs
Unexpected token: operator (>) [./node_modules/vue-strap/src/utils/utils.js:4,0][/js/app.js:28275,16]


                                    Asset     Size  Chunks                    Chunk Names
....

[ruchern-chong]

Wow. This is really weird.

Who's version of vue-strap is this?

[ipa1981]

Ok.. cleaned up everything. Just to leave bare minimum:

webpack.mix.js

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')

package.json

{
  "private": true,
  "scripts": {
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "cross-env": "^5.0.1",
    "laravel-mix": "^1.0.7",
    "vue-strap": "git+https://github.com/yuche/vue-strap.git#v2"
  }
}

app.js

Vue.component('alert', require('../../../node_modules/vue-strap/src/Alert.vue'))

Running watch (OK):

$ yarn run watch
yarn run v0.24.6
$ cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js 
 10% building modules 1/1 modules 0 active                                         
Webpack is watching the files…

 95% emitting                                                                        

 DONE  Compiled successfully in 1003ms                                                                                                                                                                   1:24:00 PM

     Asset     Size  Chunks             Chunk Names
     /js/app.js  28.2 kB       0  [emitted]  /js/app

Running production (fails):

$ yarn run production
yarn run v0.24.6
$ cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js 
 95% emitting                                                                        

 ERROR  Failed to compile with 1 errors                                                                                                                                                                  1:20:36 PM

 error  

/js/app.js from UglifyJs
Unexpected token: operator (>) [./node_modules/vue-strap/src/utils/utils.js:4,0][/js/app.js:738,16]

     Asset     Size  Chunks             Chunk Names
/js/app.js  26.3 kB       0  [emitted]  /js/app
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[ruchern-chong]

@ipa1981 https://github.com/yarnpkg/yarn/issues/3737

This seemed related to your problem. It seemed like Yarn is not installing uglify-js.

[ghost]

Have you tried the latest stable yarn release?

[ipa1981]

@ruchern I've added uglify-js manually, but same result.
Actually it's visible that the error is from UglifyJs itself

/js/app.js from UglifyJs
Unexpected token: operator (>) [./node_modules/vue-strap/src/utils/utils.js:4,0][/js/app.js:738,16]

@jhabdas Yes:

$ yarn --version
0.24.6

[ipa1981]

BTW. I see that I require a *.vue file rather than *.js, in this example. Maybe there is a difference in processing?

[ghost]

@ipa1981 🤦‍♂️ sorry when I said stable I was thinking of 0.27 since 🐈 is still in active development.

[ipa1981]

Ok. it seems yarn is not relevant here, I try npm run production with same result.
But things getting crazy :). I made example repo to replicate an issue.

https://github.com/ipa1981/laravel-mix-production-test

1. Run npm install
2. Run npm run watch - it compiles
3. Run npm run production - it fails

However I found that it fails only when vue-strap component is imported from node_modules folder, and compiles well if imported from local copy:

app.js

// This works (copy of file from node_modules folder)
import * as x from './local/utils.js'

// This fails on UglifyJS
import * as y from './node_modules/vue-strap/src/utils/utils.js'

Does it help? :)

[ghost]

Ah. If it's not yarn I have a present for you: https://www.npmjs.com/package/uglify-es

[ipa1981]

1. Maybe I can try, but how to use it with laravel-mix?
2. Still I wonder why current laravel-mix handles local copy of JS file, and fails on minimization of node_modules located JS file?

[ghost]

Damn. Looks like I should learn to read good. https://github.com/JeffreyWay/laravel-mix/issues/790#issuecomment-301214957. stepping out. don't actually use this module 😉

[ipa1981]

:) it happens.

Would be glad if @JeffreyWay could look on this.

[ruchern-chong]

@ipa1981 I have fixed your issue.

In your app.js file,

Use this instead of anything else.

import {utils} from "vue-strap";

[ipa1981]

@ruchern thanks a lot, seems this works! Not exactly as you proposed, but in original app.js file I had to change this:

Vue.component('alert', require('../../../node_modules/vue-strap/src/Alert.vue'))

to this

Vue.component('alert', require('vue-strap').alert)

I don't know what's the difference however, but this goes to compile.

[OzairP]

I'm still getting errors for shorthand closures.

@JeffreyWay perhaps swap from JSUglify to https://github.com/babel/babili ? Babili supports ES6

[ipa1981]

@ruchern Seems the solution is not good :/.

Using

Vue.component('sidebar', require('vue-strap').aside)

Is not the same as

Vue.component('sidebar', require('../../../node_modules/vue-strap/src/Aside.vue')) 

First does not include styles and template of the component, so final code is getting broken.

[ruchern-chong]

Lets try this.

import {aside} from 'vue-strap'

Vue.component('sidebar', aside)

Let me know if it works this way.

[ipa1981]

@ruchern, thanks for ideas! I just tried many different things. And it seems CommonJS syntax:

Vue.component('sidebar', require('vue-strap').aside)

finally works with latest vue-loader 13.0.0 (I had 12.2.1 on the time testing).

So at the moment it looks like everything is fine - both watch and production scripts compiles.

[StygianTraveler]

@ipa1981 If you import your Vue-Strap components that way, do you not get style conflicts with regular Bootstrap checkboxes/radios, as per this issue? https://github.com/yuche/vue-strap/issues/390

Maybe you don't use regular checkboxes or radio buttons, though. My issue is that I switched the import to the vue-strap/src/* path to avoid the radio button problem, but now I have this UglifyJs issue that seems to require the opposite. Very annoying.

By the way, probably a dumb question, but how do you update the version of vue-loader that laravel-mix is using? I don't know if that would help in any way, but since you mention updating to 13.0.0, I thought I'd give it a shot. I see the latest laravel-mix uses 12.1.1... But just installing 13.0.0 in my own project is not going to make laravel-mix use it, is it?

[ruchern-chong]

@ipa1981 Alright. Good to hear everything is working now.

[ipa1981]

@StygianTraveler Haven't noticed this problem. Maybe I simply don't use some conflicting styles. I don't remember why I used direct require rather than generic one. Probably there was a reason, but I cannot recall why.

To update a version on vue-loader simply npm install vue-loader :) it looks like laravel-mix uses it well. Please notice, you will have to do some changes in code as 1.3.0 has some breaking changes (look in release notes https://github.com/vuejs/vue-loader/releases/tag/v13.0.0

[MarcusJay]

note: using normalize-url with nextjs triggers this error as well

[hozefaj]

For webpack v3 onwards the aliasing for UglifyJS is changed. Refer https://github.com/webpack-contrib/uglifyjs-webpack-plugin.

So for me modifying my webpack.config.js from to use new UglifyJsPlugin() rather than new webpack.optimize.UglifyJsPlugin() fixed the issue.

Reference: https://github.com/joeeames/WebpackFundamentalsCourse/issues/3#issuecomment-352541826

[emp]

My babel ES2015 preset was excluding /node_modules/ and this would end up not converting some newer modules before uglify saw the code and it choked on the arrow function like the OP title, adding node_modules back solved the issue here (Webpack)

    {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ["es2015"],
        },
        exclude: /node_modules/ <-- REMOVE THIS
      }, 

[picheli20]

Looks really similar to this issue: https://github.com/webpack/webpack/issues/2972#issuecomment-341953893

I've fixed with that comment

[theomails]

"I have the same problem when my code has the syntax class. And then I found it's my fault because I forget to write .babelrc." from https://github.com/webpack/webpack/issues/2972#issuecomment-341953893

[jakobgriogoryan]

https://www.npmjs.com/package/vue-strap