Laravel-mix: watch and dev commands compile, prod fails to compile

Created on 3 May 2017 · 7Comments · Source: JeffreyWay/laravel-mix

Laravel Mix Version: 0.11.4
Node Version: v7.5.0
NPM Version: 4.5.0
OS: macOS Sierra 10.12.4

Description:

I can compile my assets running npm run watch or npm run dev, but for some reason npm run prod gives me an error.

npm run prod

> @ prod /Users/{user}/Code/{project}
> npm run production


> @ production /Users/{user}/Code/{project}
> 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                                                                        

 DONE  Compiled successfully in 6168ms                                                                                         8:39:58 AM


undefined:1624
    throw new JS_Parse_Error(message, filename, line, col, pos);
    ^
SyntaxError: Unexpected character '`'
    at JS_Parse_Error.get (eval at <anonymous> (/Users/{user}/Code/{project}node_modules/uglify-js/tools/node.js:27:1), <anonymous>:86:23)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ production script 'cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/{user}/.npm/_logs/2017-05-03T14_39_58_440Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ prod: `npm run production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ prod script 'npm run production'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run production
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/{user}/.npm/_logs/2017-05-03T14_39_58_456Z-debug.log

Steps To Reproduce:

webpack.mix.js

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.browserSync({
    proxy: '{site}.dev',
    host: '{site}.dev',
    browser: 'google chrome',
    open: 'external',
    notify: false,
});

mix.scripts([
    // Jquery
    'bower_components/jquery/dist/jquery.js',

    // Foundation
    'bower_components/foundation-sites/js/foundation.core.js',
    'bower_components/foundation-sites/js/foundation.util.*.js',

    // Foundation JS components
    'bower_components/foundation-sites/js/foundation.abide.js',
    'bower_components/foundation-sites/js/foundation.accordion.js',
    'bower_components/foundation-sites/js/foundation.accordionMenu.js',
    'bower_components/foundation-sites/js/foundation.drilldown.js',
    'bower_components/foundation-sites/js/foundation.dropdown.js',
    'bower_components/foundation-sites/js/foundation.dropdownMenu.js',
    'bower_components/foundation-sites/js/foundation.equalizer.js',
    'bower_components/foundation-sites/js/foundation.interchange.js',
    'bower_components/foundation-sites/js/foundation.magellan.js',
    'bower_components/foundation-sites/js/foundation.offcanvas.js',
    'bower_components/foundation-sites/js/foundation.orbit.js',
    'bower_components/foundation-sites/js/foundation.responsiveMenu.js',
    'bower_components/foundation-sites/js/foundation.responsiveToggle.js',
    'bower_components/foundation-sites/js/foundation.reveal.js',
    'bower_components/foundation-sites/js/foundation.slider.js',
    'bower_components/foundation-sites/js/foundation.sticky.js',
    'bower_components/foundation-sites/js/foundation.tabs.js',
    'bower_components/foundation-sites/js/foundation.toggler.js',
    'bower_components/foundation-sites/js/foundation.tooltip.js',
    'bower_components/foundation-sites/js/foundation.zf.responsiveAccordionTabs.js',

    // Vendor
    'bower_components/select2/dist/js/select2.js',
    'bower_components/froala-wysiwyg-editor/js/froala_editor.min.js',
    'bower_components/froala-wysiwyg-editor/js/plugins/image.min.js',
    'bower_components/froala-wysiwyg-editor/js/plugins/image_manager.min.js',
    'bower_components/froala-wysiwyg-editor/js/plugins/link.min.js',
    'bower_components/froala-wysiwyg-editor/js/plugins/lists.min.js',
    'bower_components/froala-wysiwyg-editor/js/plugins/paragraph_format.min.js',
    'bower_components/froala-wysiwyg-editor/js/plugins/quote.min.js',
    'bower_components/sweetalert/dist/sweetalert.min.js',
    'bower_components/dropzone/dist/dropzone.js',
    'bower_components/motion-ui/motion-ui.js',

    // App Scripts
    'resources/assets/js/app.js',
    'resources/assets/js/components/*.js',
    'resources/assets/js/views/*.js'
], 'public/js/app.js');

mix.sass('resources/assets/sass/app.scss', 'public/css');

Run npm run prod and receive the error posted above.

Let me know if there's any other information I can provide. Thanks!

Source

zacksmash

Most helpful comment

This seems to be an issue with uglification, but I'm not sure why. Will look into it.

JeffreyWay on 8 May 2017

👍3

All 7 comments

I got this (similar) problem too 👍 , only in prod mode

undefined:1624
throw new JS_Parse_Error(message, filename, line, col, pos);
^
SyntaxError: Unexpected token: name (wysiwygareaAvailable)
at JS_Parse_Error.get (eval at (/Users/Alper/Projects/PhpstormProjects/arcopm/node_modules/uglify-js/tools/node.js:27:1), :86:23)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ production: cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! Exit status 1

alperyazgan on 6 May 2017

This seems to be an issue with uglification, but I'm not sure why. Will look into it.

JeffreyWay on 8 May 2017

👍3

I've been getting a similar issue as well. The unexpected character ` looks a bit like it's failing to compile ES6 to me.

defaye on 8 May 2017

👍1

I've got the same error, only with npm run prod (dev was ok). But I think I might have figured it out:

I have this in webpack.mix.js:

mix.scripts([
'node_modules/vue/dist/vue.js',
'node_modules/sortablejs/Sortable.min.js',
'node_modules/vuedraggable/dist/vuedraggable.js',
'resources/assets/js/some_stuff.js'
],
'public/js/all_some_stuff.js').version();

And, inside some_stuff.js (some code using Vue), I had the mounted method declared this way:

...
mounted() {
...
}
...

But when I changed it to:

...
mounted: function() {
...
}
...

The error was gone.

Could it be something related to ES6 in uglification?

I hope this helps someone.

albertogato on 17 May 2017

Next tagged version of Mix fixes this.

JeffreyWay on 23 May 2017

@JeffreyWay I've update Mix, but I'm still getting an error on npm run prod

> @ prod /Users/{user}/Code/{project}
> npm run production


> @ production /Users/{user}/Code/{project}
> 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                                                                        

 DONE  Compiled successfully in 6716ms                                                                                         1:14:38 PM


undefined:1625
    throw new JS_Parse_Error(message, filename, line, col, pos);
    ^
SyntaxError: Unexpected character '`'
    at JS_Parse_Error.get (eval at <anonymous> (/Users/{user}/Code/{project}/node_modules/uglify-js/tools/node.js:27:1), <anonymous>:86:23)

npm ERR! Darwin 16.6.0
npm ERR! argv "/usr/local/Cellar/node/7.10.0/bin/node" "/usr/local/bin/npm" "run" "production"
npm ERR! node v7.10.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ production script 'cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/{user}/.npm/_logs/2017-05-30T19_14_38_833Z-debug.log

npm ERR! Darwin 16.6.0
npm ERR! argv "/usr/local/Cellar/node/7.10.0/bin/node" "/usr/local/bin/npm" "run" "prod"
npm ERR! node v7.10.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ prod: `npm run production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ prod script 'npm run production'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run production
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/{user}/.npm/_logs/2017-05-30T19_14_38_868Z-debug.log

zacksmash on 30 May 2017

👍2

@JeffreyWay - I pulled down the latest mix release and was still seeing the issue.

@zacksmash - In my case, it was one line (augh! ONE LINE!) of ES6 code. I found it (tediously) by commenting out the scripts() files, line by line, in webpack.mix.json. It took some digging, but it enabled me to find the particular file that was borked, and then my IDE helped isolate the ES6 culprit. It's a slow and terrible way to figure it out, but might be worth a shot for you. I'd bet money you have a backtick or a hashrocket somewhere there, something easily overlooked.