why is hot-reloading is not working on Gridsome

Question

After making updates on default.vue the browser reports"[HMR] Waiting for update signal from WDS..." indefinitely. Reloading the browser does not help. Eventually I have to restart gridsome to see the changes.

Steps to reproduce

• installed Gridsome and set up a new project using the CLI

• run gridsome develop

• check http://localhost:8080/ ...it works.

• check http://localhost:8080/___explore ...works

• tested a query .. works.

• modified gridsome.config.js to add siteDescription: 'this is a test gridsome site'

• restarted gridsome and verified siteDescription on ___explore and on localhost

• added <p>Description: {{ $static.metadata.siteDescription }}</p> before <slot\> on layouts\Default.vue

• hit 'save' and expected hot-reload to update page

Expected result

• Expected to see updates on localhost upon save.

• Browser stuck on "Waiting for update signal from WDS..."

Actual result

No change, I had to restart the server to see the changes

Environment

System:

OS: Windows WSL - Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa)
CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor

Binaries:

Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm

npmGlobalPackages:

@gridsome/cli: 0.3.4

Answer 1

Turns out this was an issue with WSL and Webpack not working when the repo is outside the WSL file system. It kind'a makes sense that Webpack could not monitor a "remote" machine which is what WSL is. But WSL should have made this seamless by now.

So you could move your files to the ubuntu folder https://devblogs.microsoft.com/commandline/whats-new-for-wsl-in-windows-10-version-1903/

Or like me, just switch to all-windows development.