No HMR/Refresh on WSL

[royanger]

What version of astro are you using?

2.0.2

Are you using an SSR adapter? If so, which one?

Default install

What package manager are you using?

pnpm and npm

What operating system are you using?

Windows WSL2 Ubuntu

Describe the Bug

NOTE: I have included a Stackblitz line as I needed to in order to open this, but it doesn't repro the problem since this is limited to QSL

Steps to repro:

• Run pnpm create astro@latest
• Select 'a few best practices'
• Select 'yes' for installing dependencies via pnpm
• Select 'no' for initializing a Git repo.
• cd into the project
• Use pnpm dev to start the project
• Open 'index.astro' and delete a line of text (To get started...)
• Save

The page doesn't refresh, and if I manually refresh the change it not reflected. In order to see the change I need to kill the dev server and restart.

After this I can do the following:

• rm -fr node_modules pnpm-lock.yaml
• Switch to a Windows Powershell (no WSL)
• Run pnpm i and pnpm dev
• Make a change to index.astro
• Save

Now the page auto refreshes and the change is immediately displayed.

The same issue occur when using npm with WSL, and npm works fine with Powershell/non-WSL. IE, creating and running the app with npm on WSL results in no refresh on save, and after deleting the mode_modules and package-lock.json on WSL and running npm i and npm run dev on Powershell refresh works.

WSL info:
WSL Version: 22.04.1 LTS
pnpm 7.25.1
node 18.13.0
npm 8.19.3

Windows
pnpm 7.22.0
npx envinfo --system --binaries
System:
OS: Windows 10 10.0.22621
CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900KF
Memory: 44.71 GB / 63.82 GB
Binaries:
Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-suvaf6?file=src/pages/index.astro

Participation

• I am willing to submit a pull request for this issue.

[mayank99]

Hey @royanger, when you're running the dev server in WSL, is your project also inside the linux filesytem or is it left behind in the regular windows filesystem? If the latter, then this is a bug in WSL: microsoft/WSL#4739

You might be able to work around this using vite.server.watch.usePolling in your astro config.

export default defineConfig({
  vite: {
    server: {
      watch: {
        usePolling: true,
      },
    },
  },
});

[royanger]

I didn't even think that would affect things, to be honest. I was running it out of /mnt/, so that's the Windows filesystem. Let try what you suggested and see if that helps at all.

[royanger]

The astro.config.mjs suggestion worked perfectly. Thanks for that @mayank99!

[natemoo-re]

Thanks for the assist, @mayank99! Since this is an upstream issue that we can't help with, I'm going to close this, but definitely keep an eye on microsoft/WSL#4739 to track.

See the Vite docs for more context!

[asheikho99]

Hey @royanger, when you're running the dev server in WSL, is your project also inside the linux filesytem or is it left behind in the regular windows filesystem? If the latter, then this is a bug in WSL: microsoft/WSL#4739

You might be able to work around this using vite.server.watch.usePolling in your astro config.

export default defineConfig({
  vite: {
    server: {
      watch: {
        usePolling: true,
      },
    },
  },
});

Thanks for the solution, worked in astro 3.0.5 using WSL & pnpm