Laravel-mix: Error on commands dev and production

[projct1]

Hello 😃

If i run commands by npm run dev or npm run production, then after some seconds i see this error in console:

ERROR  Failed to compile with 1 errors

 error

/js/app.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [./~/bootstrap/js/src/util.js:8,0][/js/app.js:81,19]

[JeffreyWay]

Can you check where that syntax error and paste the related code?

[projct1]

Yea, this string is const Util = (($) => { (19 symbol from left)
https://github.com/twbs/bootstrap/blob/v4-dev/js/src/util.js
That error shows if i use npm run production: http://joxi.ru/zAN5PzGI9Mle29

But if i use npm run dev, then compiling is succesfully, but with common error: http://joxi.ru/eAO4PzGtXB4nro

[projct1]

That error shows if i use npm run production
But if i use npm run dev, then compiling is succesfully, but with error: http://joxi.ru/eAO4PzGtXB4nro

[JeffreyWay]

I'm assuming it's related to Uglify trying to run on ES6 code.

Can you give me basic steps to reproduce this error?

[projct1]

Yea, i have three dependencies in package.json:

"jquery": "^3.1.0",
"bootstrap": "^4.0.0-alpha.6",
"laravel-mix": "^0.5.0"

And my app.js:

window.jQuery = window.$ = require('jquery');
require('bootstrap/js/src/util');
require('bootstrap/js/src/modal');

[CasperLaiTW]

@rorc
I think you have to require dist folder

window.jQuery = window.$ = require('jquery');
require('bootstrap/js/dist/util');
require('bootstrap/js/dist/modal');

src files is ES6 code. and config exclude node_modules so webpack don't compile it.

[projct1]

@CasperLaiTW I tryed, but unsuccessfully =(
http://joxi.ru/52aQPgEfzM8x20

[CasperLaiTW]

look not the same error.

can you provide more information for new error?

[projct1]

@CasperLaiTW Yea, ty)
That is content of npm-debug.log after running npm run production
http://pastebin.com/fy4Khfmg

[CasperLaiTW]

@rorc Can you run this command

node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

and paste the log to check?

[projct1]

@CasperLaiTW This finished without errors 😃
http://joxi.ru/4AkOKgaFqvN6Aq
Цhat's the problem?

[CasperLaiTW]

Can you check your package.json scripts?
is it latest?

{
  "scripts": {
      "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
      "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
      "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
      "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
}

[projct1]

@CasperLaiTW Yes.

[CasperLaiTW]

Do you check all the scripts were the same?

Because I wrote command just without '--hide-modules'

I think it no effect on run command

[projct1]

@CasperLaiTW Yea, i compared all my scripts with your scripts...

[CasperLaiTW]

So you run npm run production will get errors
But use my script without '--hide-modules' will success and no errors?

[CasperLaiTW]

Maybe you new issue relate #236

[projct1]

@CasperLaiTW Yea, same problems, thanks 👍

[projct1]

@CasperLaiTW By the way, with require('bootstrap/js/dist/util'); and when i try to open bootstrap modal i got new error ReferenceError: Util is not defined 😕

[CasperLaiTW]

@rorc Do you only use bootstrap modal?

I think you don't import Util. bootstrap/js/dist/modal was include Util

window.jQuery = window.$ = require('jquery');
require('bootstrap/js/dist/modal');

[projct1]

@CasperLaiTW Yes, at the moment from bootstrap i need only modal component.
No, bootstrap/js/dist/modal not including Util.js
Mayby problem with bootstrap plugin?

[CasperLaiTW]

weird, I use bootstrap 4 and only import bootstrap/js/dist/modal and no errors.

do you use bootstrap/js/dist/modal and get errors?

[projct1]

@CasperLaiTW Are you tried to open modal dialog?
If i just import require('bootstrap/js/dist/modal'); i have no errors too 😄

[CasperLaiTW]

@rorc

Yes, I import bootstrap/js/dist/modal and open modal dialog.

modal shown and no errors

[JeffreyWay]

Going to close this, since it seems the main issue was resolved.

[nervo]

@CasperLaiTW @rorc i'm just curious, if you use bootstrap in a modular approach (i mean require('bootstrap/js/dist/modal') instead of require('bootstrap')), using dist and not src, how do you declare your mix autoload ?

I've tried

    .autoload({
        ...
        'bootstrap/js/dist/tooltip': ['Tooltip']
    })

But browser console complains Super expression must either be null or a function, not object, wich means that "autoloaded" objects are not properly passed.

[opmind]

I have solved same problem with import js files from src using #harmony version of ugifyjs:
package.json:
"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"
and then
npm i or yarn install
and resolving node_modules folder with bootstrap in babel-loader section of webpack.config.
https://stackoverflow.com/a/43893311

[ghuachins]

@opmind I'd been using that solution:
"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony" but now it doesn't works for me. I found another solution:
"uglify-js": "git://github.com/mishoo/UglifyJS2#harmony-v2.8.22"
and then
npm i or yarn install