Laravel 5.4“npm run dev”

Question

I created on a MAC a clean Laravel application. It runs correctly if I execute "php artisan serve".

I tried to run npm run dev and I get this error :

> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: spawn node_modules/webpack/bin/webpack.js ENOENT
    at exports._errnoException (util.js:1018:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
    at onErrorNT (internal/child_process.js:367:16)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:393:7)
    at startup (bootstrap_node.js:150:9)
    at bootstrap_node.js:508:3

As seen on SO, I have tried to remove the node_module and re-execute npm init but it did not help.

Versions:

• npm 2.15.11
• node v6.10.1
• Laravel Framework 5.4.23

Here is the npm log:

0 info it worked if it ends with ok
1 verbose cli [ '/opt/local/bin/node', '/opt/local/bin/npm', 'run', 'dev' ]
2 info using npm@2.15.11
3 info using node@v6.10.1
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info predev @
6 info dev @
7 verbose unsafe-perm in lifecycle true
8 info @ Failed to exec dev script
9 verbose stack Error: @ dev: `npm run development`
9 verbose stack Exit status 1
9 verbose stack     at EventEmitter.<anonymous> (/opt/local/lib/node_modules/npm/lib/utils/lifecycle.js:217:16)
9 verbose stack     at emitTwo (events.js:106:13)
9 verbose stack     at EventEmitter.emit (events.js:191:7)
9 verbose stack     at ChildProcess.<anonymous> (/opt/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
9 verbose stack     at emitTwo (events.js:106:13)
9 verbose stack     at ChildProcess.emit (events.js:191:7)
9 verbose stack     at maybeClose (internal/child_process.js:886:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
10 verbose pkgid @
11 verbose cwd /www/ui
12 error Darwin 15.6.0
13 error argv "/opt/local/bin/node" "/opt/local/bin/npm" "run" "dev"
14 error node v6.10.1
15 error npm  v2.15.11
16 error code ELIFECYCLE
17 error @ dev: `npm run development`
17 error Exit status 1
18 error Failed at the @ dev script 'npm run development'.

Any help appreciated.

Answer 1

I got this issue when both mix and cross-env packages were out of date. I got this working by following the instructions at the bottom. But first make sure you have modern versions of packages; I've posted package.json and my global npm packages for reference.

Package.json:

You don't need handlebars or vee-validate here, but everything else.

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.2.1"
  },
  "dependencies": {
    "handlebars": "^4.0.10",
    "vee-validate": "^2.0.0-rc.8",
    "vue": "^2.4.2"
  }
}

Global npm Packages

I have these global packages, take careful note of the versions! Recent package updates to webpack require newer versions of webpack/node.

├── n@2.1.7
├── npm@5.0.0
└── webpack@3.4.1

Install Instructions (Important to follow each step!)

Follow each step carefully, especially #2.

1. Delete node_modules directory
2. Delete package-lock.json file
3. Run: $ npm install
4. Run: $ npm run dev

Try Again

At this point you can try again. It resolved all errors for me. I found the original steps from GitHub here:

https://github.com/JeffreyWay/laravel-mix/issues/623#issuecomment-315122856