laravel 5.4 dev npm run dev error

Inside the webpack.config.js is your replacement code for the gulpfile. If you need more customization, just copy the base file from mix. The commands are located in the package.json for npm. Your error message would indicate either a bad npm install or you are not running the command from the project root.

@ejdelmonico thanks for the help. could you please elaborate more. i found the node_modules/laravel-mix/setup/webpack.config.js file. still a bit confused.

am i supposed to take the contents of this and create a new gulpfile.js?

am i supposed to copy "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" and add it to webpack.mix.js?

as i mentioned, node and javascript are a weakness of mine and i'm still trying to get a better understanding of it. i am running the command from the project root.

should i delete node_modules and run npm install again?

Hold on a sec. I will try a new install because a lot has changed in a month.

@w1n78 I had the sam exact issue with new install. I installed cross-env, webpack and babel globally and it works fine now.

yarn add webpack babel cross-env

That should fix it. Don't forget to include a .babelrc with

{
    "presets": ["es2015"]
}

@ejdelmonico i installed those 3 and created .babelrc in the project root. do i have to initialize .babelrc or source it?

i get the following errors now...

> @ dev /Users/sherwin/apps/laravel/test_project
> cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 73% optimize/Users/sherwin/apps/laravel/test_project/node_modules/extract-text-webpack-plugin/index.js:246
                var shouldExtract = !!(options.allChunks || chunk.isInitial());
                                                                  ^

TypeError: chunk.isInitial is not a function
    at /Users/sherwin/apps/laravel/test_project/node_modules/extract-text-webpack-plugin/index.js:246:55
    at /Users/sherwin/apps/laravel/test_project/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:3025:16
    at eachOfArrayLike (/Users/sherwin/apps/laravel/test_project/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:941:9)
    at eachOf (/Users/sherwin/apps/laravel/test_project/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:991:5)
    at Object.eachLimit (/Users/sherwin/apps/laravel/test_project/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:3089:3)
    at ExtractTextPlugin.<anonymous> (/Users/sherwin/apps/laravel/test_project/node_modules/extract-text-webpack-plugin/index.js:244:10)
    at Compilation.applyPluginsAsync (/Users/sherwin/apps/laravel/test_project/node_modules/tapable/lib/Tapable.js:71:13)
    at Compilation.seal (/Users/sherwin/apps/laravel/test_project/node_modules/webpack/lib/Compilation.js:525:7)
    at Compiler.<anonymous> (/Users/sherwin/apps/laravel/test_project/node_modules/webpack/lib/Compiler.js:397:15)
    at /Users/sherwin/apps/laravel/test_project/node_modules/tapable/lib/Tapable.js:103:11
    at Compilation.<anonymous> (/Users/sherwin/apps/laravel/test_project/node_modules/webpack/lib/Compilation.js:445:10)
    at /Users/sherwin/apps/laravel/test_project/node_modules/webpack/lib/Compilation.js:417:12
    at /Users/sherwin/apps/laravel/test_project/node_modules/webpack/lib/Compilation.js:332:10
    at /Users/sherwin/apps/laravel/test_project/node_modules/async/lib/async.js:52:16
    at done (/Users/sherwin/apps/laravel/test_project/node_modules/async/lib/async.js:246:17)
    at /Users/sherwin/apps/laravel/test_project/node_modules/async/lib/async.js:44:16
    at errorAndCallback (/Users/sherwin/apps/laravel/test_project/node_modules/webpack/lib/Compilation.js:202:5)
    at errorOrWarningAndCallback (/Users/sherwin/apps/laravel/test_project/node_modules/webpack/lib/Compilation.js:225:13)
    at /Users/sherwin/apps/laravel/test_project/node_modules/webpack/lib/Compilation.js:229:12
    at onDoneResolving (/Users/sherwin/apps/laravel/test_project/node_modules/webpack/lib/NormalModuleFactory.js:29:20)
    at /Users/sherwin/apps/laravel/test_project/node_modules/webpack/lib/NormalModuleFactory.js:85:20
    at /Users/sherwin/apps/laravel/test_project/node_modules/async/lib/async.js:726:13
    at /Users/sherwin/apps/laravel/test_project/node_modules/async/lib/async.js:52:16
    at done (/Users/sherwin/apps/laravel/test_project/node_modules/async/lib/async.js:241:17)
    at /Users/sherwin/apps/laravel/test_project/node_modules/async/lib/async.js:44:16
    at /Users/sherwin/apps/laravel/test_project/node_modules/async/lib/async.js:723:17
    at /Users/sherwin/apps/laravel/test_project/node_modules/async/lib/async.js:167:37
    at /Users/sherwin/apps/laravel/test_project/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:24:19
    at onResolved (/Users/sherwin/apps/laravel/test_project/node_modules/enhanced-resolve/lib/Resolver.js:38:18)
    at /Users/sherwin/apps/laravel/test_project/node_modules/enhanced-resolve/lib/Resolver.js:127:10

then the same errors appear as above. wonder if it's because i'm using a dev branch that i have to also point to dependencies' dev branches. although, you were able to fix it.

@ejdelmonico i deleted my node_modules and tried again. also moved .babelrc to ~/.babelrc. i tried to source it but error so i guess i don't source it. same error.

any other ideas? BTW thanks for your time and patience.

woke up this morning and laravel 5.4 is released. i deleted my test project and pulled in the master branch. did the same thing but got a different error. looks like something to do with babel so i deleted ~/.babelrc and it no works :)

I have the same error

'node_modules' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v6.9.4
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `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`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script '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'.
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!     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
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:

@dev_hernandez2 , I had the same error. Fixed it by removing the paths and .js suffix, so that now my script looks like:

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

I was having the same problem, and tweaking the paths like @KrzysztofNiepokojczycki did fixed it.

It would be great if there was a better way to solve this, I'd rather not have to do this for every new project.

@KrzysztofNiepokojczycki Thanks it fix :)

Thanks @KrzysztofNiepokojczycki but still have the error.

'cross-env' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v6.9.4
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script 'cross-env NODE_ENV=development webpack --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=development webpack --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:

Same error here. Running npm run dev gives me the errors posted above, however, if I take the command and run it manually:

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

It seems to work without issue. Any ideas on how to fix this?

after following those 2 steps, now my npm run dev running

but throwing another error

> cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
                                                                           73% optimizeD:\xampp\htdocs\josh_laravel54\node_modules\extract-text-webpack-plugin\index.js:246
                                var shouldExtract = !!(options.allChunks || chunk.isInitial());
                                                                                  ^

TypeError: chunk.isInitial is not a function
    at D:\xampp\htdocs\josh_laravel54\node_modules\extract-text-webpack-plugin\index.js:246:55
    at D:\xampp\htdocs\josh_laravel54\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:3025:16
    at eachOfArrayLike (D:\xampp\htdocs\josh_laravel54\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:941:9)
    at eachOf (D:\xampp\htdocs\josh_laravel54\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:991:5)
    at Object.eachLimit (D:\xampp\htdocs\josh_laravel54\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:3089:3)
    at ExtractTextPlugin.<anonymous> (D:\xampp\htdocs\josh_laravel54\node_modules\extract-text-webpack-plugin\index.js:244:10)
    at Compilation.applyPluginsAsync (D:\xampp\htdocs\josh_laravel54\node_modules\tapable\lib\Tapable.js:71:13)
    at Compilation.seal (D:\xampp\htdocs\josh_laravel54\node_modules\webpack\lib\Compilation.js:525:7)
    at Compiler.<anonymous> (D:\xampp\htdocs\josh_laravel54\node_modules\webpack\lib\Compiler.js:397:15)
    at D:\xampp\htdocs\josh_laravel54\node_modules\tapable\lib\Tapable.js:103:11
    at Compilation.<anonymous> (D:\xampp\htdocs\josh_laravel54\node_modules\webpack\lib\Compilation.js:445:10)
    at D:\xampp\htdocs\josh_laravel54\node_modules\webpack\lib\Compilation.js:417:12
    at D:\xampp\htdocs\josh_laravel54\node_modules\webpack\lib\Compilation.js:332:10
    at D:\xampp\htdocs\josh_laravel54\node_modules\async\lib\async.js:52:16
    at done (D:\xampp\htdocs\josh_laravel54\node_modules\async\lib\async.js:246:17)
    at D:\xampp\htdocs\josh_laravel54\node_modules\async\lib\async.js:44:16
    at errorAndCallback (D:\xampp\htdocs\josh_laravel54\node_modules\webpack\lib\Compilation.js:202:5)
    at errorOrWarningAndCallback (D:\xampp\htdocs\josh_laravel54\node_modules\webpack\lib\Compilation.js:225:13)
    at D:\xampp\htdocs\josh_laravel54\node_modules\webpack\lib\Compilation.js:229:12
    at onDoneResolving (D:\xampp\htdocs\josh_laravel54\node_modules\webpack\lib\NormalModuleFactory.js:29:20)
    at D:\xampp\htdocs\josh_laravel54\node_modules\webpack\lib\NormalModuleFactory.js:85:20
    at D:\xampp\htdocs\josh_laravel54\node_modules\async\lib\async.js:726:13
    at D:\xampp\htdocs\josh_laravel54\node_modules\async\lib\async.js:52:16
    at done (D:\xampp\htdocs\josh_laravel54\node_modules\async\lib\async.js:241:17)
    at D:\xampp\htdocs\josh_laravel54\node_modules\async\lib\async.js:44:16
    at D:\xampp\htdocs\josh_laravel54\node_modules\async\lib\async.js:723:17
    at D:\xampp\htdocs\josh_laravel54\node_modules\async\lib\async.js:167:37
    at D:\xampp\htdocs\josh_laravel54\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:24:19
    at onResolved (D:\xampp\htdocs\josh_laravel54\node_modules\enhanced-resolve\lib\Resolver.js:38:18)
    at D:\xampp\htdocs\josh_laravel54\node_modules\enhanced-resolve\lib\Resolver.js:127:10

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Seenu\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v6.9.4
npm ERR! npm  v4.1.1
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script 'cross-env NODE_ENV=development webpack --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=development webpack --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!     D:\xampp\htdocs\josh_laravel54\npm-debug.log

looks like mix is immature yet,

anyone recommend using gulp/elixir or stick to mix and wait till bugs fixed?

thanks

Can you all try with the latest package.json in the laravel/laravel repository:

https://github.com/laravel/laravel/blob/master/package.json

@lorvent Hard to help if you don't paste in your webpack.mix.js file.

@TaylorOtwell I just tried again with the new package.json (from a fresh install) and it now works. Thank you!

@JeffreyWay it has default code

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');

UPDATE

On a fresh install of L5.4.3, after npm install and npm run dev, it works perfectly. The issues I'm seeing below must be related to my rather insane webpack.mix.js file.

I rm -rf node_modules/ then npm install.

Using new package.json, and my webpack.mix.js, on Windows 10 with latest (7.4) nodejs I get the following when I npm run dev:

These dependencies were not found in node_modules:

* codemirror
* moment
* ../fonts/bootstrap/glyphicons-halflings-regular.eot
* ../fonts/bootstrap/glyphicons-halflings-regular.woff2
* ../fonts/bootstrap/glyphicons-halflings-regular.woff
* ../fonts/bootstrap/glyphicons-halflings-regular.ttf
* ../fonts/bootstrap/glyphicons-halflings-regular.svg

I do have another issue with a vendor js file where webpack is trying to resolve a relative directory within that file and can't, but that's not related.

@lindstrom - Hmm, and moment and codemirror are in your package.json file, and have been installed?

npm rebuild node-sass fixed it for me. The node-sass binding needed to be rebuilt for my current environment.

@TaylorOtwell that work perfect, thanks.

@JeffreyWay No -- I don't have them in my package.json as they are not dependencies of my project. I think they're being derived as dependencies from some vendor files I have in there for my admin theme (ProUI). Looking at it again now.

@TaylorOtwell Package.json fixed it for me. Thanks!

@JeffreyWay

I found that codemirror appears to be an optional dependency of Summernote (jQuery and Bootstrap are it's only published deps: https://github.com/summernote/summernote).

With the same fresh install of L5.4.3.

bower install summernote

Edit webpack.mix.js

mix.copy('bower_components/summernote/dist/summernote.css', 'resources/assets/css/vendor/summernote');
mix.copy('bower_components/summernote/dist/summernote.min.js', 'resources/assets/js/vendor/summernote');

mix.js(['resources/assets/js/vendor/summernote/summernote.min.js', 'resources/assets/js/app.js'], 'public/js/app.js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Run npm run dev results:

This dependency was not found in node_modules:

* codemirror

Did you forget to run npm install --save for it?
                                                                    Asset      Size  Chunks                    Chunk Names
  fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1   20.1 kB          [emitted]
  fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760    109 kB          [emitted]
  fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512   45.4 kB          [emitted]
 fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158   23.4 kB          [emitted]
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb     18 kB          [emitted]
                                                               /js/app.js   1.28 MB       0  [emitted]  [big]  app
                                                             /css/app.css    685 kB       0  [emitted]  [big]  app
                                                        mix-manifest.json  66 bytes          [emitted]
                 ../resources/assets/css/vendor/summernote/summernote.css   13.2 kB          [emitted]
               ../resources/assets/js/vendor/summernote/summernote.min.js   92.2 kB          [emitted]

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v7.4.0
npm ERR! npm  v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! @ 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`
npm ERR! Exit status 2
npm ERR!
npm ERR! 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'.
// snip irrelevant

Here is the relevant section of summernote.js where it checks for codemirror:

  var hasCodeMirror = !!window.CodeMirror;
  if (!hasCodeMirror && isSupportAmd && typeof require !== 'undefined') {
    if (typeof require.resolve !== 'undefined') {
      try {
        // If CodeMirror can't be resolved, `require.resolve` will throw an
        // exception and `hasCodeMirror` won't be set to `true`.
        require.resolve('codemirror');
        hasCodeMirror = true;
      } catch (e) {
        // Do nothing.
      }
    } else if (typeof eval('require').specified !== 'undefined') {
      hasCodeMirror = eval('require').specified('codemirror');
    }
  }

Finally, from within the emitted app.js I see the following which appears to have some relevance:

      CodeMirror;agent.hasCodeMirror && (agent.isSupportAmd ? Promise.resolve().then(function() { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [!(function webpackMissingModule() { var e = new Error("Cannot find module \"codemirror\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())]; (function (a) {
    CodeMirror = a;
  }.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));}).catch(__webpack_require__.oe) : CodeMirror = window.CodeMirror);var Codeview = function Codeview(a) {

Let me know if I can offer anything else.

--- UPDATE --- Appears to just be the way webpack resolves dependencies. See: https://github.com/epoberezkin/ajv/issues/117

So, in my case, I use bower and copy just the assets/files I need over to resources/assets/vendor/js/foo (or css/scss). By doing this, I don't have to wait for or worry about bower/npm installing every time I deploy. The only thing I run at production is gulp --production (now) which just grabs my assets (which are versioned), builds everything and puts it in /public.

It would seem like if I wanted to move to Laravel Mix, I'd have to switch to npm to manage all of my third-party libraries and npm install (yarn really) on production, then let weback resolve everything out of node_modules/.

I'd rather not change this aspect of my build process because I personally find it to be pragmatic. On the other hand, yarn may make this build time less of an issue than it was in the past and maybe its time to let go of bower anyway. We'll see.

When i run: npm run watch

http://image.prntscr.com/image/b935df34bd754f6ea3e9101f2833fd97.png

Any ideas?

To fix the build I had to remove the node_modules folder and update the package.json.

npm rebuild didn't help.

I also had to remove node_modules and update the package.json then do npm install and npm run dev

removing node_modules and installing again with new package.json works for me too.

Also webpack ssl not working, something wrong with self sign certificate. :/

I can't even add my own forge ssl .cert and .key files.

It's strange that webpack do not supports .cert and .key files, istead of that, they want .pem.. Before i was using gulp with browsersync, and that one supports .cert and. key like a charm.. Why webpack don't have that funcitonality? Maybe someone knows, i googled all the internet regarding that issue, and i could't find the solution..