Laravel-mix: Problem with `npm run watch` in a Homestead box on Windows 10

[YahzeeSkellington]

• Laravel Mix Version: 0.11.4
• Node Version: 7.10.0
• NPM Version: 4.2.0
• OS: Windows 10
• Homestead: 2.1.0

Description:

I've just started using Homestead and I got the VM up and running, but I'm having trouble using Laravel Mix. I can execute prod and dev successfully, but watch throws this error:

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

Error: watch public/wp-app/themes/spiral/node_modules/depd/lib/compat ENOSPC
    at exports._errnoException (util.js:1050:11)
    at FSWatcher.start (fs.js:1398:19)
    at Object.fs.watch (fs.js:1424:11)
    at createFsWatchInstance (/home/vagrant/Code/senzafine/node_modules/chokidar/lib/nodefs-handler.js:37:15)
    at setFsWatchListener (/home/vagrant/Code/senzafine/node_modules/chokidar/lib/nodefs-handler.js:80:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/vagrant/Code/senzafine/node_modules/chokidar/lib/nodefs-handler.js:228:14)
    at FSWatcher.NodeFsHandler._handleDir (/home/vagrant/Code/senzafine/node_modules/chokidar/lib/nodefs-handler.js:407:19)
    at FSWatcher.<anonymous> (/home/vagrant/Code/senzafine/node_modules/chokidar/lib/nodefs-handler.js:455:19)
    at FSWatcher.<anonymous> (/home/vagrant/Code/senzafine/node_modules/chokidar/lib/nodefs-handler.js:460:16)
    at FSReqWrap.oncomplete (fs.js:114:15)

npm ERR! Linux 4.4.0-66-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "watch"
npm ERR! node v7.10.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ 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`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ watch script 'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --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 node_modules/webpack/bin/webpack.js --watch --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!     /home/vagrant/.npm/_logs/2017-05-06T14_20_27_926Z-debug.log
vagrant@homestead:~/Code/senzafine$ exit
logout
Connection to 127.0.0.1 closed.

Steps To Reproduce:

My package.json scripts are this:

"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 webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

My webpack.mix.js is setup to use BrowserSync like so:

const BrowserSyncPlugin = require('browser-sync-webpack-plugin')

mix.webpackConfig({
    plugins: [
        new BrowserSyncPlugin(
            {
                files: [
                    './**/*.css',
                    'resources/views/**/*.php'
                ]
            },
            {
                reload: false,
                open: false
            }
        )
    ]
})

I tried running watch removing BrowserSync from the config, but I got the same problem.

One last thing, since I'm new at this and couldn't find any info anywhere, if I get watch to run can I open browser on my host machine to watch the changes or does it need to be on the VM?

Thanks!

[ruchern-chong]

You do not need to manually configure BrowserSync.

Just do this in your webpack.mix.js file

mix.browserSync();

[YahzeeSkellington]

But watch fails even when I don't use BrowserSync

[ruchern-chong]

I just saw thisENOSPC. ENOSPC = No space on hard drive.

http://stackoverflow.com/a/22476114/4031163

Check your Homestead available disk space.

[YahzeeSkellington]

I applied the fix from the link and I stopped getting the error, but I'm having other issues now. After compiling BrowserSync shows this:

[BS] Proxying: http://app.dev
[BS] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://10.0.2.15:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.2.15:3001
 ----------------------------------
[BS] Watching files...
[BS] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

It watches and compiles css files ok, but nothing else. Also I can't access any of the URLs given. Where does http://app.dev and http://10.0.2.15:3000` come from and how can I access the website from my browser?

I also ran npm run watch-poll with the same results

[YahzeeSkellington]

Update: I added back this BrowserSync config to my webpack.mix.js adding host, port and proxy options and now I can access the website from my host machine:

const BrowserSyncPlugin = require('browser-sync-webpack-plugin')

mix.webpackConfig({
    plugins: [
        new BrowserSyncPlugin(
            {
                host: '192.168.10.10',
                port: 8000,
                proxy: 'http://senzafine.app',
                files: [
                    './**/*.css'
                ]
            },
            {
                reload: false,
                open: false
            }
        )
    ]
})

Now css and js files are compiling and hot reloading fine, but changes to other files such as blade templates aren't reloading the page and I have to do it manually to see the changes. Is there a way to watch those files too? I tried adding the views directory to the files option but no luck.

[ruchern-chong]

You are running BrowserSync in Homestead, so the watch command is trying to launch a browser in your Homestead. However, Homestead is a CLI platform so there is no way to launch a browser from inside.

[QWp6t]

lol y u running npm stuff in your vm?

i mean, do whatever makes you happy, but it just adds an unnecessary layer of complexity. makes more sense to run on host machine. vm should be as close to production as possible for optimal dev/prod parity imo

[YahzeeSkellington]

I finally got it working putting this on my webpack.mix.js file and running watch-poll

mix.webpackConfig({
   plugins: [
      new BrowserSyncPlugin(
         {
            host: '192.168.10.10',
            port: 3000,
            proxy: 'http://senzafine.app',
            files: [
               './**/*.css',
               './app/**/*',
               './config/**/*',
               './resources/views/**/*',
               './routes/**/*'
            ],
            watchOptions: {
              usePolling: true,
              interval: 500
            },
            open: false
         },
         {
            reload: false
         }
      )
   ]
})

[prionkor]

@YahzeeSkellington Did you turn off nginx server? or the watch proxy server can run on top of it?

[garbinmarcelo]

@YahzeeSkellington Can you monitor your view and controller files with browsersync? I'm trying, but it only works with css and js. I'm using Windows 10 and vagrant/homestead.

[Fuxy22]

I'm running on Linux Mint 17 and I get the same issue with Homestead v7.0.1 the best I can get by running npm run watch-poll is for it to watch the .js and .css file but not the .blade.php files.

Running the command outside the VM does what it was supposed to do although I would prefer to avoid that if possible.

[joseph-d]

In addition to npm run watch-poll add the following to mix.browserSync():

    files: [
        'app/**/*.php',
        'resources/**/*',
        'public/js/**/*.js',
        'public/css/**/*.css'
    ],
    watchOptions: {
        usePolling: true,
        interval: 1
    }