Error when use gulp --production

[csvwolf]

Here is my demo repo: https://github.com/ElementUI/element-in-laravel-starter

It works when use gulp but there is an error when use gulp --production:

{ Error
    at new JS_Parse_Error (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1534:18)
    at js_error (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1542:11)
    at croak (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2089:9)
    at token_error (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2097:9)
    at unexpected (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2103:9)
    at expr_atom (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2630:9)
    at maybe_unary (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2792:19)
    at expr_ops (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2827:24)
    at maybe_conditional (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2832:20)
    at maybe_assign (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2856:20)
  message: '/Users/SkyAo/Develop/img/element-icons.09162bc.svg: SyntaxError: Unexpected token: operator (<)',
  fileName: '/Users/SkyAo/Develop/img/element-icons.09162bc.svg',
  lineNumber: 1,
  stack: 'Error\n    at new JS_Parse_Error (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1534:18)\n    at js_error (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1542:11)\n    at croak (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2089:9)\n    at token_error (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2097:9)\n    at unexpected (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2103:9)\n    at expr_atom (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2630:9)\n    at maybe_unary (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2792:19)\n    at expr_ops (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2827:24)\n    at maybe_conditional (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2832:20)\n    at maybe_assign (eval at <anonymous> (/Users/SkyAo/Develop/element-in-laravel-starter/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2856:20)',
  showStack: false,
  showProperties: true,

I though it may be worked with the pull request #28 since it looks like the uglify-js compressed not only js-files?

Thank you.

[SebastianS90]

_{If you want to test it with my change from #28 use the following in your package.json:}

"laravel-elixir-webpack-official": "https://github.com/SebastianS90/laravel-elixir-webpack-official/tarball/22a3805996dfb7ca3e4137e9bdcb29232ba9f519"

_{That refers to my dist branch that also contains the compiled files from the dist folder.}

EDIT (2016-12-01):

Please don't use the workaround above any more, my fix got merged. Switch back to official version: "laravel-elixir-webpack-official": "^1.0.10"

[csvwolf]

@SebastianS90 Thank you but 404 in the link.

[csvwolf]

@SebastianS90 I tested it and it doesn't work in my demo. The same error happened.

[SebastianS90]

@csvwolf oops, I somehow messed up copying that link, sorry. I've fixed the comment above, and it works for me with your demo project.

[csvwolf]

@SebastianS90 Yes, thank you very much. It does work for me! Maybe the last failure is because of the cache of yarn. I use npm to reinstall it and all work well.

[mstralka]

Hi I'm getting a similar error:

{ Error
    at new JS_Parse_Error (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1534:18)
    at js_error (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1542:11)
    at croak (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2089:9)
    at token_error (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2097:9)
    at expect_token (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2110:9)
    at expect (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2113:36)
    at eval (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2686:13)
    at eval (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2136:24)
    at expr_atom (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2616:35)
    at maybe_unary (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2792:19)
  message: '/opt/project/app.js: SyntaxError: Unexpected token punc «(», expected punc «:»',
  fileName: '/opt/project/app.js',
  lineNumber: 87082,
  stack: 'Error\n    at new JS_Parse_Error (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1534:18)\n    at js_error (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1542:11)\n    at croak (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2089:9)\n    at token_error (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2097:9)\n    at expect_token (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2110:9)\n    at expect (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2113:36)\n    at eval (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2686:13)\n    at eval (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2136:24)\n    at expr_atom (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2616:35)\n    at maybe_unary (eval at <anonymous> (/opt/project/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2792:19)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-uglify' }

I am using your version of laravel-elixir-webpack-official but I don't know how to track down the problematic code. Any suggestions?

Thanks

[SebastianS90]

@mstralka: You should track down the problem as follows:

• Run gulp without --produtcion and ensure that it doesn't yield an error
• In your project directory, run ./node_modules/.bin/uglifyjs public/js/app.js
• That probably yields an error like this:

Parse error at public/js/app.js:1234:56
SyntaxError: Unexpected token punc «(», expected punc «:»
Error
    at new JS_Parse_Error [...]

If so, open public/js/app.js and look at the content around the stated line (1234 in my example). There you have something that is not proper javascript for browsers. Maybe just a typo in your own code, or some library code that uses ES6 features. All ES6 code must be passed through a transpiler (buble or babel). Packages in node_modules must ship already transpiled files because of #32. If you use one that doesn't, you should add the following to your webpack configuration:

        module: {
            loaders: [
                {
                    test: /\.js$/,
                    loader: 'buble',
                    include: [
                        /node_modules\/name-of-package/,
                        /node_modules\/name-of-another-package/
                    ]
                }
            ]
        }

[petergaal91]

Same problem here. With the gulp command i can compile my js files successfuly, but with the --production flag i receive the following error message:

{ Error
    at new JS_Parse_Error (eval at <anonymous> (D:\Development\Workspace\university_cloud\vendor\y9\cyan\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:1534:18)
    at js_error (eval at <anonymous> (D:\Development\Workspace\university_cloud\vendor\y9\cyan\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:1542:11)
    at croak (eval at <anonymous> (D:\Development\Workspace\university_cloud\vendor\y9\cyan\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2089:9)
    at token_error (eval at <anonymous> (D:\Development\Workspace\university_cloud\vendor\y9\cyan\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2097:9)
    at expect_token (eval at <anonymous> (D:\Development\Workspace\university_cloud\vendor\y9\cyan\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2110:9)
    at expect (eval at <anonymous> (D:\Development\Workspace\university_cloud\vendor\y9\cyan\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2113:36)
    at eval (eval at <anonymous> (D:\Development\Workspace\university_cloud\vendor\y9\cyan\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2686:13)
    at eval (eval at <anonymous> (D:\Development\Workspace\university_cloud\vendor\y9\cyan\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2136:24)
    at expr_atom (eval at <anonymous> (D:\Development\Workspace\university_cloud\vendor\y9\cyan\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2616:35)
    at maybe_unary (eval at <anonymous> (D:\Development\Workspace\university_cloud\vendor\y9\cyan\node_modules\gulp-uglify\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2792:19)
  message: 'D:\\Development\\Workspace\\university_cloud\\vendor\\y9\\cyan\\main.js: SyntaxError: Unexpected token punc «,», expected punc «:»',
  fileName: 'D:\\Development\\Workspace\\university_cloud\\vendor\\y9\\cyan\\main.js',
  lineNumber: 261,
  stack: 'Error\n    at new JS_Parse_Error (eval at <anonymous> (D:\\Development\\Workspace\\university_cloud\\vendor\\y9\\cyan\\node_modules\\gulp-uglify\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:1534:18)\n    at js_error (eval at <anonymous> (D:\\Development\\Workspace\\university_cloud\\vendor\\y9\\cyan\\node_modules\\gulp-uglify\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:1542:11)\n    at croak (eval at <anonymous> (D:\\Development\\Workspace\\university_cloud\\vendor\\y9\\cyan\\node_modules\\gulp-uglify\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:2089:9)\n    at token_error (eval at <anonymous> (D:\\Development\\Workspace\\university_cloud\\vendor\\y9\\cyan\\node_modules\\gulp-uglify\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:2097:9)\n    at expect_token (eval at <anonymous> (D:\\Development\\Workspace\\university_cloud\\vendor\\y9\\cyan\\node_modules\\gulp-uglify\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:2110:9)\n    at expect (eval at <anonymous> (D:\\Development\\Workspace\\university_cloud\\vendor\\y9\\cyan\\node_modules\\gulp-uglify\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:2113:36)\n    at eval (eval at <anonymous> (D:\\Development\\Workspace\\university_cloud\\vendor\\y9\\cyan\\node_modules\\gulp-uglify\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:2686:13)\n    at eval (eval at <anonymous> (D:\\Development\\Workspace\\university_cloud\\vendor\\y9\\cyan\\node_modules\\gulp-uglify\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:2136:24)\n    at expr_atom (eval at <anonymous> (D:\\Development\\Workspace\\university_cloud\\vendor\\y9\\cyan\\node_modules\\gulp-uglify\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:2616:35)\n    at maybe_unary (eval at <anonymous> (D:\\Development\\Workspace\\university_cloud\\vendor\\y9\\cyan\\node_modules\\gulp-uglify\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:2792:19)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-uglify' }

I think the gulp-uglify package in production mode cant do anything with the ES6 let, spread attributes, arrow functions in my files. Have any option to handle this issue?

[SebastianS90]

Make sure your code get's passed through buble, because it transforms these features to oldfashioned javascript. See my configuration snippet and the default configuration for reference.

[petergaal91]

I will try it, thanks!

[mstralka]

Thank you @SebastianS90. I tracked down my problem to be how I was importing vue-multiselect, as a workaround for its issue #63

Changing my import statement to this solved the problem:

import Multiselect from 'vue-multiselect';
Vue.component('multiselect', Multiselect);

[shentao]

@mstralka So this is how it should actually be imported. No workaround needed?

[mstralka]

@shentao - correct, I don't think the workaround is needed when using webpack. I think I was originally using browserify with Laravel 5.2 but am now using webpack with 5.3.

[csvwolf]

@Fatih90 That is because laravel-elixir-webpack-official processed not only js files, it is fixed in #28 and in the starter I used the package instead of official version, it works.

[GregPeden]

The fix from @mstralka only works because that change makes the webpack compile pull the min.js pre-compiled script instead of the .vue component, so it bypasses the problem but doesn't actually correct the underlying issue. For instance, you would still be unable to pull the Multiselect mixins in to your own .vue component without getting the same error.

The issue is that the vue-multiselect project is using ES6 but the Laravel minifier (as of Laravel 5.3) doesn't like ES6. The compile is producing an error on the first encounter of an ES6-style truncated function declaration. It needs to be converted before making it to the minifier.

The following minimalist webpack.config.js, placed in the root folder of your project, corrects the issue. NOTE 1: Lots of online references tell you to use "babel" for ES6 conversion, but Laravel 5.3 ships with "buble" which does the same thing, so use that unless you are already using Babel for your own reasons. NOTE 2: This is the as-basic-as-possible solution. If you already have a webpack.config.js file, the important part is the 'buble' loader for JS.

module.exports = {
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'buble'
        }]
    }
};

[zachleigh]

Any updates on this? The package greyby/vue-spinner is causing this for me. Importing a loader is done like this:

import PulseLoader from 'vue-spinner/src/PulseLoader.vue'

new Vue({
  components: {
    PulseLoader
  }
})

This compiles fine with gulp but fails with error SyntaxError: Unexpected token punc «(», expected punc «:»' when running gulp --production.

My webpack config:

    Elixir.webpack.mergeConfig({
        entry: {
            'entry': jsDir + 'entry.js',
            'home': jsDir + 'home.js',
            'journal' : jsDir + 'journal.js',
            'landing_page' : jsDir + 'landing_page.js',
            'password_reset' : jsDir + 'password_reset.js',
            'profile' : jsDir + 'profile.js',
            'settings' : jsDir + 'settings.js',
        },
        output: {
            path: __dirname + '/public/js/',
            filename: '[name].js'
        },
        module: {
            loaders: [{ test: /\.js$/, loader: 'buble', exclude: /node_modules/ }]
        },
    });

[SebastianS90]

@zachleigh: Your problem probably is related to the javascript minifier (uglify) that is only turned on when using --production. Here are two ideas what could be the exact problem:

• Your JS sources from node_modules are not valid javascript, i.e. using some ES6 features. Then --production fails because the minifier doesn't know this syntax. The code should be passed through buble first. Solution: Don't exclude node_modules for your buble loader, i.e. change the configuration line to loaders: [{ test: /\.js$/, loader: 'buble' }]

• Webpack produces something that is not javascript, e.g. a map file, css, html, .... Then this non-html output will be passed to the minifier due to #27. This can be fixed by accepting #28, but @JeffreyWay somehow didn't give us any feedback for six weeks now. See my first comment to this issue for a temporary workaround that is also used and confirmed working by the author of this issue here.

[iget-master]

I have a simillar issue here:

Parse error at public/js/modules/travel_resource.min.js.map:1,10
SyntaxError: Unexpected token: punc (:)

Looks like Laravel-Elixir-Webpack is trying to uglify the .map files too. I've enabled map files by adding devtool: 'source-map' option to webpack config merge.

If I disable the map generation, the issue stops, but I need map files.

Also tryied to uglify my .js source directly as @SebastianS90 suggested and work fine. But the same error (obviously) occurs if I try to uglify the map files.

Please @JeffreyWay, accept #28 and make us happy!

[zachleigh]

@SebastianS90 Yeah, it was the loaders config line. Changed it to what you suggested and it runs fine. Thanks!

[SebastianS90]

28 got merged into master, but it is not yet released as new version and npm does not lead my fix. @JeffreyWay should release a new version of this package...

[iget-master]

Just updated package to 1.0.10 and the problem was now fixed, so this issue can be closed...

[SebastianS90]

@csvwolf @Fatih90 and everyone else who switched to my fork: Please use the official version again, the fix got merged and released. Edit the package.json file as follows "laravel-elixir-webpack-official": "^1.0.10"

[csvwolf]

@SebastianS90 Thank you!

[maulshh]

hi @SebastianS90 I'm still getting these errors while gulp --production my js files

I've tried to run ./node_modules/.bin/uglifyjs public/js/app.js but it doesn't throw any errors, any ideas?

[SebastianS90]

@maulshh Without the exact error message I can only guess... Have you checked the first point of this comment? Maybe you use a library which does not ship compiled files. The exclude here is the problem.

[maulshh]

@SebastianS90 Oh I'm so sorry I haven't read the discussion above thoroughly that I missed that comment. Yes my problem is that excluded node_modules, because when I uglified it manually it doesn't yield any error. Thanks a lot 👍 👍 👍