Laravel-mix: npm run dev always fails and the log is unhelpful

[ghost]

• Laravel Mix Version: 0.7.5
• Node Version: 7.5.0
• NPM Version: 4.1.2
• OS: macOS Sierra 10.12.3

Description:

Since yesterday, no matter what I do, npm run dev and npm run watch will always come back with a bunch of errors which I can't make any sense of.

npm run watch is the vaguest... It comes back with this: Failed to compile with 2 errors

While npm run dev gives more feedback, I can't make any use of it to fix my problem. This is what npm-debug.log says:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle @~predev: @
6 silly lifecycle @~predev: no script for predev, continuing
7 info lifecycle @~dev: @
8 verbose lifecycle @~dev: unsafe-perm in lifecycle true
9 verbose lifecycle @~dev: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/user/Sites/project/node_modules/.bin:/usr/local/sbin:/usr/local/Cellar/php70/7.0.15_8/bin:/Users/user/.composer/vendor/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
10 verbose lifecycle @~dev: CWD: /Users/user/Sites/project
11 silly lifecycle @~dev: Args: [ '-c',
11 silly lifecycle   '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' ]
12 silly lifecycle @~dev: Returned: code: 2  signal: null
13 info lifecycle @~dev: Failed to exec dev script
14 verbose stack Error: @ 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`
14 verbose stack Exit status 2
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:192:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:192:7)
14 verbose stack     at maybeClose (internal/child_process.js:890:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid @
16 verbose cwd /Users/user/Sites/project
17 error Darwin 16.4.0
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
19 error node v7.5.0
20 error npm  v4.1.2
21 error code ELIFECYCLE
22 error @ 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`
22 error Exit status 2
23 error Failed at the @ dev script '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'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the  package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     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
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

I'd like to mention that my assets work as they should despite this error, but I would like to get rid of it anyway.

So for more relevant files, this is my 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.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .copy('node_modules/datatables/media/css/jquery.dataTables.min.css', 'public/css/dataTables.css')
    .copy('node_modules/datatables/media/images', 'public/images')
    .copy('resources/assets/css/dataTables.bootstrap.min.css', 'public/css/dataTables.bootstrap.css');

app.scss

// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

// Variables
@import "variables";
@import "../css/animate.min";
@import "../css/light-bootstrap-dashboard";
@import "../css/pe-icon-7-stroke";

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

// FullCalendar
@import "node_modules/fullcalendar/dist/fullcalendar";
@import "node_modules/fullcalendar/dist/fullcalendar.print";

// Sweetalert
@import "node_modules/sweetalert/dist/sweetalert";

bootstrap.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require('jquery');

require('bootstrap-sass');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

// window.axios.defaults.headers.common = {
//     'X-CSRF-TOKEN': window.Laravel.csrfToken,
//     'X-Requested-With': 'XMLHttpRequest'
// };

/**
 * Let's load the calendar
 */
require('fullcalendar');

/**
 * DataTables
 */
require('datatables.net');

/**
 * DateTime Picker
 */

/**
 * Sweetalert
 */
require('sweetalert');

and app.js

require('./bootstrap');
require('./dataTables.bootstrap.min');
import './bootstrap-notify'
import './bootstrap-select'
import './light-bootstrap-dashboard'
import './http-method-simulator'

Vue.component('stat', require('./components/stat.vue'));
Vue.component('calendar', require('./components/calendar.vue'));

const app = new Vue({
    el: '#app',

    data: {
        showForm: false,
    }
});

Steps To Reproduce:

This problem started happening suddenly and it might be related to one of the modules I installed. I might also be having some mistake in the files above... Something I might not be seeing. However, I have no exact way to reproduce this error as it just keeps happening.

[kohenkatz]

All that this (very verbose) error is saying is that node ended with a non-zero exit code, which usually indicates an error. This line (among others) says that the code was 2:

22 error Exit status 2

However, I don't see anywhere in the current Webpack source code that returns 2 (I only see 1 and -1), so I can't tell you any more than that.

[kohenkatz]

The best thing for you to try is to narrow down which file(s) (if any) are causing the problem.

Start by commenting out all lines but one in webpack.mix.js. In other words, first try to run it with only mix.js, then with only mix.sass, and then with only one of the mix.copy lines at a time. If it is one of the copy lines, then I don't know what else to tell you to troubleshoot. If it is the js or sass line, then you can do the same type of test again. For example, if it was the js line that caused the issue, comment out all of the require and import lines in app.js and uncomment them one by one until you find the error again. Then look at the last file you uncommented and repeat the process there if needed.

[nicolashuber]

I had a similiar issue, in my case nodejs didn't find cross-env.js file. So I fixed the path on my package.json from node node_modules/cross-env/bin/cross-env.js to node node_modules/cross-env/dist/bin/cross-env.js. After that npm run dev works.

"scripts": {
    "dev": "node node_modules/cross-env/dist/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/dist/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",
    "watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/dist/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/dist/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"
  },

[melih]

@nicolashuber Wohoo! That solved the problem.