Nuxt.js: Laravel Homestead and Nuxt HMR problem

Created on 17 Jun 2020  路  2Comments  路  Source: nuxt/nuxt.js

Can anyone help about Hot Module Replacement on Win10/Vagrant env?

Hot-reload is not working with Win10/VB/Vagrant. But if I edit a file inside my virtual machine, then hot-reload is working fine.

The problem occurs with a fresh Nuxt.js installation.
The latest available software was used.

Some people believe that the problem appeared after the last update of Win10...

ENVIRONMENT:

  • Windows 10 Pro (10.0.19041 Build 19041);
  • VirtualBox 6.1.10 r138449 (Qt5.6.2)
  • Vagrant 2.2.9
  • Vagrant box "laravel/homestead" v9.5.1
  • Git v2.27.0.windows.1
  • Nuxt.js v2.12.2 (dev mode)
  • (node_modules/chokidar v3.4.0)

Extra configs:

# ~/Homestead/Homestead.yaml
# ...
ports:
    - send: 3000
      to: 3000
// nuxt-project-root-dir/package.json
{
// ...
  "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "3000"
    }
  },
// ...
} 

Hope the problem/solution is somewhere around the nuxt.config.js > watchers.chokidar object...

Any heeelp?

This question is available on Nuxt community (#c10793)
help-wanted question stale

Most helpful comment

Yea,

it seems that problem is with latest Chokidar version...

Simple test

Env:

Console installation:

# bash
$ (sudo) npm install -g create-nuxt-app # v3.0.0
$ npx create-nuxt-app folder-name # options: 'npm' package manager
$ cd folder-name/
$ # file modifications: PACKAGE.JSON and NUXT.CONFIG.JS (below)
$ npm uninstall chokidar # v3.4.0
$ npm install [email protected]
$ npm run dev

File modifications:

{
// folder-name/package.json
// ...
  "config": {
    "nuxt": {
      "host": "0.0.0.0", // 192.168.10.10
      "port": "3000"
    }
  },
// ...
} 
// folder-name/nuxt.config.js
{
// ...
  watchers: {
    chokidar: {
      usePolling: true,
      useFsEvents: false
    },
    webpack: {
      aggregateTimeout: 300,
      poll: 1000
    }
  }
// ...
} 

...pay attention to watchers.chokidar object above.

That's it!
After that, hot-reload is working with Win10/VirtualBox/Vagrant!

Can someone get involved in more detailed testing or some system solution?

All 2 comments

Yea,

it seems that problem is with latest Chokidar version...

Simple test

Env:

Console installation:

# bash
$ (sudo) npm install -g create-nuxt-app # v3.0.0
$ npx create-nuxt-app folder-name # options: 'npm' package manager
$ cd folder-name/
$ # file modifications: PACKAGE.JSON and NUXT.CONFIG.JS (below)
$ npm uninstall chokidar # v3.4.0
$ npm install [email protected]
$ npm run dev

File modifications:

{
// folder-name/package.json
// ...
  "config": {
    "nuxt": {
      "host": "0.0.0.0", // 192.168.10.10
      "port": "3000"
    }
  },
// ...
} 
// folder-name/nuxt.config.js
{
// ...
  watchers: {
    chokidar: {
      usePolling: true,
      useFsEvents: false
    },
    webpack: {
      aggregateTimeout: 300,
      poll: 1000
    }
  }
// ...
} 

...pay attention to watchers.chokidar object above.

That's it!
After that, hot-reload is working with Win10/VirtualBox/Vagrant!

Can someone get involved in more detailed testing or some system solution?

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

  1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
  2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bimohxh picture bimohxh  路  3Comments

vadimsg picture vadimsg  路  3Comments

shyamchandranmec picture shyamchandranmec  路  3Comments

nassimbenkirane picture nassimbenkirane  路  3Comments

maicong picture maicong  路  3Comments