Error in Laravel

[EmilMoe]

I'm using Laravel, but I get an error when I try to import VueWorker

I only added the import VueWorker from 'vue-worker'; so that must be the error.

emil@debian:/var/www/dashboard$ gulp --production
[16:37:02] Using gulpfile /var/www/dashboard/gulpfile.js
[16:37:02] Starting 'all'...
[16:37:02] Starting 'sass'...
[16:37:04] Finished 'sass' after 2.4 s
[16:37:04] Starting 'webpack'...
{ Error
    at new JS_Parse_Error (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1534:18)
    at js_error (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1542:11)
    at croak (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2089:9)
    at token_error (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2097:9)
    at expect_token (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2110:9)
    at expect (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2113:36)
    at eval (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2686:13)
    at eval (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2136:24)
    at expr_atom (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2616:35)
    at maybe_unary (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2792:19)
  message: '/var/www/dashboard/app.js: SyntaxError: Unexpected token punc «(», expected punc «:»',
  fileName: '/var/www/dashboard/app.js',
  lineNumber: 42975,
  stack: 'Error\n    at new JS_Parse_Error (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1534:18)\n    at js_error (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1542:11)\n    at croak (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2089:9)\n    at token_error (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2097:9)\n    at expect_token (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2110:9)\n    at expect (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2113:36)\n    at eval (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2686:13)\n    at eval (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2136:24)\n    at expr_atom (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2616:35)\n    at maybe_unary (eval at <anonymous> (/var/www/dashboard/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2792:19)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-uglify' }

[israelss]

I'm not familiarized at all with Laravel, but I'll try my best to help you!

Can you post the contents of /var/www/dashboard/gulpfile.js and /var/www/dashboard/app.js (specially around the line 42975)?

Are there any errors if you disable the gulp-uglify plugin?

Also, are you using uglify-js, uglify-js-harmony or other module?

One more thing, where did you added import VueWorker from 'vue-worker';?

[EmilMoe]

I don't think Laravel is especially the issue as it's a PHP framework.

Line 42.975 would be the compiled output line.

gulpfile.js simple contains a reference to Elixir (Gulp framework in Laravel).

I added the import in app.js, which is not the output but where I also load Vue.js

I do not know how to disable uglify.

I can see this is tricky for you to solve, I will also try to ask on a Laravel community if you believe the error relates to uglify

[EmilMoe]

I was following this https://alligator.io/vuejs/vue-workers/ now I tried again once more, I don't get any errors. This is so strange, but it works - that's important! Thanks for your help.

[israelss]

Glad to hear that you got it working, @EmilMoe!
Perhaps it was caused by some caching issue, I really don't know.
Thanks for reporting, and if you have any more problems, please don't hesitate to open another issue.

[EmilMoe]

@israelss I updated some scripts and are now compiling using webpack instead of gulp. This leads me to a more specific error pointing at line 4:

from UglifyJs
Unexpected token: punc (() [./~/vue-worker/index.js:4,0]

It is this line:

install (Vue, name = '$worker') {

[EmilMoe]

It is because UglifyJS doesn't support ES6: http://stackoverflow.com/questions/42633716/unexpected-token-punc-expected-punc-when-creating-chunk-from-uglifyjs

I have 2 options now

1. try to make this work https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
2. you make vue-worker ES5 compliant :-)

I don't know if it will then complain about your script behind though.

[EmilMoe]

I tested and it works to transform it to ES5. I don't know if you want to accept this change, I created a pull request in case you want to.

Functionality is kept intact.

[israelss]

Thank you! Merged. 👍 👍