npm run hot error

[jericopulvera]

How to run this in hot reload?

npm run hot

I get this error when I save a changes

fs.js:641 return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode); ^

Error: ENOENT: no such file or directory, open '/home/laravel/Code/laravel-boilerplate/public/0.3aeef44db5a04e747bf2.hot-update.js' at Error (native) at Object.fs.openSync (fs.js:641:18) at Object.fs.readFileSync (fs.js:509:33) at File.read (/home/laravel/Code/laravel-boilerplate/node_modules/laravel-mix/src/File.js:180:19) at File.version (/home/laravel/Code/laravel-boilerplate/node_modules/laravel-mix/src/File.js:190:25) at Manifest.hash (/home/laravel/Code/laravel-boilerplate/node_modules/laravel-mix/src/Manifest.js:55:65) at manifest.forEach.file (/home/laravel/Code/laravel-boilerplate/node_modules/laravel-mix/src/plugins/CustomTasksPlugin.js:79:47) at Array.forEach (native) at CustomTasksPlugin.applyVersioning (/home/laravel/Code/laravel-boilerplate/node_modules/laravel-mix/src/plugins/CustomTasksPlugin.js:79:18) at Compiler.compiler.plugin.stats (/home/laravel/Code/laravel-boilerplate/node_modules/laravel-mix/src/plugins/CustomTasksPlugin.js:12:22) at Compiler.applyPlugins (/home/laravel/Code/laravel-boilerplate/node_modules/tapable/lib/Tapable.js:61:14) at Watching._done (/home/laravel/Code/laravel-boilerplate/node_modules/webpack/lib/Compiler.js:104:17) at compiler.emitRecords.err (/home/laravel/Code/laravel-boilerplate/node_modules/webpack/lib/Compiler.js:78:19) at Compiler.emitRecords (/home/laravel/Code/laravel-boilerplate/node_modules/webpack/lib/Compiler.js:375:38) at compiler.emitAssets.err (/home/laravel/Code/laravel-boilerplate/node_modules/webpack/lib/Compiler.js:61:20) at applyPluginsAsyncSeries1.err (/home/laravel/Code/laravel-boilerplate/node_modules/webpack/lib/Compiler.js:368:12) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ 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 npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ hot 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! /home/laravel/.npm/_logs/2017-11-24T11_56_21_975Z-debug.lo

Version: Laravel 5.5 Boilerplate

[Shuyinsama]

I believe this comes from the base laravel package and has never worked for this boilerplate as far as I know. For this package it is recommended to use something like Homestead, Vagrant or Valet.

[jericopulvera]

I used Laravel Homestead and Valet together in a Linux machine.

npm run hot works on normal freshly installed Laravel projects but not on Laravel boilerplate that's why I opened this issue.

[Shuyinsama]

It is working for me though what are the files you are changing, maybe we could reproduce the issue. It looks like it can't seem to write to the public folder

EDIT: I answered wrongly before. Even though we never use it for the development, it seems to work for me

[jericopulvera]

I am changing the example component.

What I did was

1. Clone the boilerplate repository
2. composer install
3. npm install
4. npm run hot
5. edited the ExampleComponent.vue

[Shuyinsama]

Yeah this seems to be a issue with mix.version() in the webpack.config.js.

EDIT: Found a issue on the laravel-mix repo: https://github.com/JeffreyWay/laravel-mix/issues/1176

Try to make the file like this and see if that works:

let 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.sass('resources/assets/sass/frontend/app.scss', 'public/css/frontend.css')
    .sass('resources/assets/sass/backend/app.scss', 'public/css/backend.css')
    .js('resources/assets/js/frontend/app.js', 'public/js/frontend.js')
    .js([
        'resources/assets/js/backend/before.js',
        'resources/assets/js/backend/app.js',
        'resources/assets/js/backend/after.js'
    ], 'public/js/backend.js');

if(mix.inProduction){
    if (process.env.npm_lifecycle_event !== 'hot') {
      mix.version()
    }
}

[jericopulvera]

That fixed it. Thanks

[Shuyinsama]

I pushed a fix to the master branch that is a bit cleaner :) Good luck with further development

[qiutuleng]

@Shuyinsama Your code has a bug. mix.inProduction is true, because it's a function.

It working for me.

if (mix.inProduction()) {
    if (process.env.npm_lifecycle_event !== 'hot') {
      mix.version()
    }
}

And thank you.