Laravel-mix: how to off uglify?

[dimensi]

I tried to install uglify-js # harmony, everything was set, but does not work anyway.
package.json

  "dependencies": {
    "bootstrap": "4.0.0-alpha.5",
    "vue": "^2.2.2",
    "vuex": "^2.2.1",
    "webextension-polyfill": "github:mozilla/webextension-polyfill"
  },
  "devDependencies": {
    "uglify-js": "mishoo/UglifyJS2#harmony",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-env": "^1.2.1",
    "cross-env": "^3.2.3",
    "del-cli": "^0.2.1",
    "laravel-mix": "^0.8.8"
  }

Message with uglify-js

 ERROR  Failed to compile with 3 errors                                                                                                                                               9:04:54 PM

 error                                                                                                                                                                                          

build/js/newtab.js from UglifyJs                                                                                                                                                                
Unexpected token operator «=», expected punc «,» [./app/helpers/functions.js:16,46][build/js/newtab.js:95,56]                                                                                   

 error                                                                                                                                                                                          

build/js/options.js from UglifyJs                                                                                                                                                               
Unexpected token operator «=», expected punc «,» [./app/helpers/functions.js:16,46][build/js/options.js:96,56]                                                                                  

 error                                                                                                                                                                                          

build/js/background.js from UglifyJs                                                                                                                                                            
Unexpected token operator «=», expected punc «,» [./app/helpers/functions.js:16,46][build/js/background.js:96,56]                                                                               


undefined:1622                                                                                                                                                                                  
    throw new JS_Parse_Error(message, filename, line, col, pos);                                                                                                                                
    ^                                                                                                                                                                                           
SyntaxError: Unexpected token: punc ())                                                                                                                                                         
    at JS_Parse_Error.get (eval at <anonymous> (/home/dimensi/projects/camellia/node_modules/laravel-mix/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:86:23)                         
error Command failed with exit code 1.                                                                                                                                                          
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.         

Message without compression in webpack

undefined:1622                                                                                                                                                                                  
    throw new JS_Parse_Error(message, filename, line, col, pos);                                                                                                                                
    ^                                                                                                                                                                                           
SyntaxError: Unexpected token: punc ())                                                                                                                                                         
    at JS_Parse_Error.get (eval at <anonymous> (/home/dimensi/projects/camellia/node_modules/laravel-mix/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:86:23)                         
error Command failed with exit code 1.           

In advance thanks for the answer.

[acro5piano]

Hi, I'm new to Laravel mix, but I found one option for handle laravel-mix uglify option.

mix.options({
    uglify: false,
  })

I don't now why are you going to use uglify-js so this answer might be useless ...

edit:

I read webpack.mix.js api and it says

// mix.options({
//   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
//   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
//   uglify: {}, // Uglify-specific options. https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
//   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
// });

so

mix.options({
    uglify: {
      compress: false,
    }
  })

will work.

This might will be useful

https://webpack.github.io/docs/list-of-plugins#uglifyjsplugin

[Kocal]

Hi, I had the same problem in a project and I found a way to fix it.
Normally, the harmony branch of UglifyJS2 should work with ES6.

Here is my package.json:

"devDependencies": {
  "laravel-mix": "^0.8.8",
  "uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony",
  // ...
},
"dependencies": {
  "vue": "^2.2.4",
  // ...
}

I see that you tried to use UglifyJS2#harmony in your devDependencies, maybe you can try the full GitHub URL?

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

Also, this is my webpack.mix.js, where Uglify compression is still on:

mix
  .js('resources/assets/js/app.js', 'public/js')
  .js('resources/assets/js/app-admin.js', 'public/js')
  .extract(['jquery', 'vue', 'axios', 'bootstrap-sass'])
  .sass('resources/assets/sass/app.scss', 'public/css')
  .version();

[lucidlemon]

So does this mean we don't get minification with ES6/ES7 at all?

[seSze]

I have the same problem. Mix process *.vue files but for some reasons has problem with *.js files containing ES6 code. (fresh install of laravel)

app.js

import helpers from './utils/helpers';

helpers.js

let lari = {
    // code
}

/js/app.js from UglifyJs
Unexpected token: name (lari)

[JVMartin]

Can confirm - all ES6 fails when doing yarn run prod with mix.

[rafapaulin]

confirmed... yarn run prod or npm run prod does not work with es6 modules e/or syntax

[tegola]

How can something so basic not work? Is building es6 modules for production so uncommon?
BTW, I get the same error, I'm still trying to fix it.

[devgnx]

+1

[Kocal]

What if you use mix.babel() instead of mix.js() ?

[panzer-planet]

I've been using mix.react(). I assumed the preset would output ES5 but it merely converts the JSX. Is there a simple way to make this preset use babel? I really love mix, but I'm starting to think my setup is too complex for what it was intended for and I should change to raw using webpack.