Laravel-mix: NPM run dev command not working

[mudliyarp]

• Laravel Mix Version: 4.0.12
• Node Version (node -v): 10.14.2
• NPM Version (npm -v): 6.4.1
• OS: Windows 10

Description:

Followed the laravel-mix workflow as per given on the website. But after the npm run dev command the below error is shown. I have checked all over the issues in the github. As the issue states, yarn is not an internal command. Is there a need to install yarn in project, or I kind of missed some steps. Even If I install yarn and run npm run dev the errors goes but the command takes a long time. Please find the steps below

Steps To Reproduce:

1) laravel new testapp ->cd testapp
2) composer install
3) npm install
4) npm run dev --After executing the command the below errors shows up
$ npm run dev

@ dev C:\xampp\htdocs\laratestapp
npm run development

@ development C:\xampp\htdocs\laratestapp
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

Additional dependencies must be installed. This will only take a moment.

Running: yarn add vue-template-compiler --dev --production=false
'yarn' is not recognized as an internal or external command,
operable program or batch file.
C:\xampp\htdocs\laratestapp\node_modules\webpack-cli\bin\cli.js:244
throw err;
^

Error: Command failed: yarn add vue-template-compiler --dev --production=false
'yarn' is not recognized as an internal or external command,
operable program or batch file.

at checkExecSyncError (child_process.js:616:11)
at Object.execSync (child_process.js:653:13)
at Dependencies.execute (C:\xampp\htdocs\laratestapp\node_modules\laravel-mix\src\Dependencies.js:52:22)
at dependencies.reject.tap.dependencies (C:\xampp\htdocs\laratestapp\node_modules\laravel-mix\src\Dependencies.js:30:22)
at Array.value (C:\xampp\htdocs\laratestapp\node_modules\laravel-mix\src\helpers.js:24:13)
at Dependencies.install (C:\xampp\htdocs\laratestapp\node_modules\laravel-mix\src\Dependencies.js:29:14)
at Function.dependencies (C:\xampp\htdocs\laratestapp\node_modules\laravel-mix\src\Assert.js:77:40)
at concat.filter.tap.dependencies (C:\xampp\htdocs\laratestapp\node_modules\laravel-mix\src\components\ComponentFactory.js:130:24)
at Array.value (C:\xampp\htdocs\laratestapp\node_modules\laravel-mix\src\helpers.js:24:13)
at ComponentFactory.installDependencies (C:\xampp\htdocs\laratestapp\node_modules\laravel-mix\src\components\ComponentFactory.js:129:14)
at Mix.listen (C:\xampp\htdocs\laratestapp\node_modules\laravel-mix\src\components\ComponentFactory.js:54:44)
at events.(anonymous function).forEach.handler (C:\xampp\htdocs\laratestapp\node_modules\laravel-mix\src\Dispatcher.js:34:47)
at Array.forEach (<anonymous>)
at Dispatcher.fire (C:\xampp\htdocs\laratestapp\node_modules\laravel-mix\src\Dispatcher.js:34:28)
at Mix.dispatch (C:\xampp\htdocs\laratestapp\node_modules\laravel-mix\src\Mix.js:119:25)
at Object.<anonymous> (C:\xampp\htdocs\laratestapp\node_modules\laravel-mix\setup\webpack.config.js:19:5)
at Module._compile (C:\xampp\htdocs\laratestapp\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (C:\xampp\htdocs\laratestapp\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (C:\xampp\htdocs\laratestapp\node_modules\webpack-cli\bin\convert-argv.js:133:13)
at requireConfig (C:\xampp\htdocs\laratestapp\node_modules\webpack-cli\bin\convert-argv.js:135:6)
at C:\xampp\htdocs\laratestapp\node_modules\webpack-cli\bin\convert-argv.js:142:17
at Array.forEach (<anonymous>)
at module.exports (C:\xampp\htdocs\laratestapp\node_modules\webpack-cli\bin\convert-argv.js:140:15)
at yargs.parse (C:\xampp\htdocs\laratestapp\node_modules\webpack-cli\bin\cli.js:241:39)
at Object.parse (C:\xampp\htdocs\laratestapp\node_modules\yargs\yargs.js:567:18)
at C:\xampp\htdocs\laratestapp\node_modules\webpack-cli\bin\cli.js:219:8
at Object.<anonymous> (C:\xampp\htdocs\laratestapp\node_modules\webpack-cli\bin\cli.js:538:3)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: cross-env 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 @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\mudliyarp\AppData\Roaming\npm-cache_logs\2018-12-26T07_24_34_336Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: npm run development
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\mudliyarp\AppData\Roaming\npm-cache_logs\2018-12-26T07_24_34_378Z-debug.log

5) So after install yarn in the project the erros goes but it takes a long time and doesnt not comile the assets these the output

npm run dev

> @ dev C:\xampp\htdocs\laratestapp
> npm run development


> @ development C:\xampp\htdocs\laratestapp
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js


Additional dependencies must be installed. This will only take a moment.

Running: yarn add vue-template-compiler --dev --production=false

[filipkrstic]

I think its something up to Yarn and Yarn configuration. This solution is just a fix and you should be able to continue with your project. If you open Dependencies.js class, you can see a method
called buildInstallCommand:

buildInstallCommand(dependencies) {
    dependencies = [].concat(dependencies).join(' ');

    if (File.exists('yarn.lock')) {
        return `yarn add ${dependencies} --dev --production=false`;
    }

    return `npm install ${dependencies} --save-dev --production=false`;
}

So, as you can see Laravel Mix 4 will use Yarn if yarn.lock exists. If you dont use Yarn in your project at all, go and remove yarn.lock from your root folder and Laravel Mix 4 will use NPM to install additonal packages.

[mudliyarp]

@filipkrstic : That worked! Thanks for the fix!

[ohnotnow]

I think this will hit more people unexpectedly. If you run a laravel new my-app it will create a yarn.lock file in the folder - so even if you are 100% using npm when you try and run mix it will crash. Maybe that buildInstallCommand should do a check if the binary is in the $PATH - or the framework shouldn't install a yarn.lock file out of the box I guess.

Anyway - it's popped up a few times recently (on laracasts for instance) and bit me inside a CI build container - so thought I'd chime in ;-)

[JeffreyWay]

This is fixed in v4.0.13. We now check to see if the Yarn program is installed, rather than searching for yarn.lock.

[ohnotnow]

Woo - thanks! :-D Happy new year! :-D

[mudliyarp]

@JeffreyWay: Checked with the new version v4.0.13, executed npm run dev and it worked smoothly. Thanks