HRM not working on WSL 2

[marioidival]

Please fill out the below information:

• Microsoft Windows [version 10.0.18956.1000]

• What you're doing and what's happening: Development frontend technologies with HRM (Hot Reload Module)

• What's wrong / what should be happening instead: HRM not working on WSL 2 using localhost, but with network ip works.

This issues says that works.

[timmyd87]

+1 - Tried this with Vue and getting exactly the same result

[Biswa96]

Can you provide the steps to reproduce your issue?

[marioidival]

@Biswa96

• I've tested with vue, but I belive that any HRM framework can reproduce this error
• create a app with these framework
• npm run serve and wait the server up
• open the browser with port that framework says
• edit the file page to the HRM can try reload the page.
• on localhost not works, but with network ip works.

[naeluh]

I am also experiencing this issue +1

[naeluh]

I wanted to add one more note here. I was on Microsoft Windows [version 10.0.18956.1000] and was experiencing this issue. I thought it was WSL 2 that was causing so I switched back WSL 1 and was still experiencing this issue. This HMR issue might be tied more to that build version than WSL 2 itself.

[ghost]

We’ve labelled your issue as ‘need-repro’ since we need more steps to help identify your problem. Could you please provide us with reproducible steps for the issue you’re experiencing, including things such as the specific command line steps necessary to reproduce the behavior and their output. Thank you! -The WSL Team

[therealkenc]

There is no repro here.

[naeluh]

• Had WSL1 Ubuntu 18 already installed on machine
• Signed up for windows insiders build
• updated OS to version 10.0.18956.1000
• in powershell applied these commands
  • Enable-WindowsOptionalFeature -Online -FeatureName VirtualMachinePlatform
  • Enable-WindowsOptionalFeature -Online -FeatureName:Microsoft-Hyper-V -All
  • wsl --set-version <DistroName> 2
• WSL1 is converted to WSL2
• Tried to run Vue CLI
• No Hot Module reloading
• Got frustrated and decided to go back to WSL1
• Ran the command wsl --set-version <DistroName> 1
• WSL2 is converted to WSL1
• Tried to run Vue CLI
• Still No Hot Module reloading

[marioidival]

@Biswa96

* I've tested with `vue`, but I belive that any HRM framework can reproduce this error

* create a app with these framework

* `npm run serve` and wait the server up

* open the browser with port that framework says

* edit the file page to the HRM can try reload the page.

* on localhost not works, but with `network ip` works.

@therealkenc ?

[therealkenc]

@therealkenc ?

There is no repro here.

[way-zer]

Maybe you can try this:
Access localhost ports from Windows(on https://github.com/shayne/wsl2-hacks)

[naeluh]

@way-zer I don't think its a port issue more so webpack-dev-server does not seem to be watching the files when I make a change the frontend does not rebuild. But the initial build works I can see it on port 3000. Its the rebuilding that does not happen but those hacks are pretty awesome.

[naeluh]

@way-zer although this looks like it might work

Increase max_user_watches

If devtools are watching for file changes, the default is too low.

# /etc/rc.local runs as root by default
# if you run these yourself add 'sudo' to the beginning of each command

sysctl -w fs.inotify.max_user_watches=524288

I think I may try this tonight and I will report back here.

Thanks!

[swawrzyn]

@way-zer although this looks like it might work

Increase max_user_watches
If devtools are watching for file changes, the default is too low.

# /etc/rc.local runs as root by default
# if you run these yourself add 'sudo' to the beginning of each command

sysctl -w fs.inotify.max_user_watches=524288

I think I may try this tonight and I will report back here.

Thanks!

Thank you, this worked for me.

[naeluh]

@swawrzyn cool thanks for the update I have not had a chance to test this!
Ok I will try soon ! Thanks!

[naeluh]

@swawrzyn This only partially worked for me. Did your browser reload ? Mine did not ? Also what did you test it with ? I was testing a custom implementation of Webpack 4 and Hugo Static site generator. Thanks!

[craigloewen-msft]

Hi @marioidival I tried to reproduce this today and was able to see dynamic reloading on localhost.

For clarity, here's what I did:

• Git cloned a sample project into my WSL distro
• Ran these commands to start it up:

npm install
npm run dev

• Loaded the page on localhost:8080
• Made changes to ./vue-spapt1/src/components/About.vue with vim and saw the changes load on the website without refreshing the page.

So it seems like this has been fixed since build 18956 as there have been many improvements to localhost since then. Please try again and let us know if you run into the issue :) !

[mithunshanbhag]

I'm on WSL2 (build 18990) and occasionally encounter this issue with my angular projects (the ng serve command stops reacting to file changes). Unfortunately I don't have a deterministic repro.

I've tried increasing the max number of file watchers (per VSCode's troubleshooting docs) but that too hasn't helped.

FWIW, I have never encountered this issue on WSL1.

[Tatametheus]

After increasing the max_user_watches, HRM still not working. I need to refresh the page manually

[craigloewen-msft]

@Tatamethues can you share a project or detailed repro steps for us to reproduce this issue? I'm not able to reproduce it on any of the vue apps I'm running.

[naeluh]

@craigloewen-msft I have build 18990 installed I will test my apps tonight. But one question are you suggesting that increasing max_user_watches would not be needed in build 18990 or greater or we need that also ? Thanks for your help!

[craigloewen-msft]

I tried to repro this again using this sample calculator React project but was unable to do so. It was able to reload live without any issues.

If you're experiencing this issue please make sure that you are running inside of your Linux root file system. If you still find that your page is not auto updating then please post a sample solution that we can try and repro the problem on, thank you!

[naeluh]

@craigloewen-msft so If I run anything inside of /mnt/ it wont work ? thanks!

[naeluh]

Ok thank you! @craigloewen-msft I can see now that the idea is separating the operating systems completely. If I am using the vscode following the steps here =>https://code.visualstudio.com/blogs/2019/09/03/wsl2

I am able to edit and reloading works. I think the key item I did not understand is that I am not able to really use my files in /mnt in the same way.

I don't know if that was totally clear that was the case. Anyways I moved everything into /var/www and it all started working again. Thanks everyone for the help!

[naeluh]

@craigloewen-msft sorry one other question is there documentation that talks about this somewhere ? Where once cannot use the windows file system anymore or at least not in the same way ? Thanks again!!

[craigloewen-msft]

Yes we have this documentation page: UX Changes between WSL 1 and WSL 2 with the exact goal of documenting these changes. I'll add in a note there about the fact that inotify events (which power live reloading) are not tracked in WSL 2 in your Windows drive file system. :)

[naeluh]

Awesome @craigloewen-msft thank you!

[chloesun]

Experienced the same issue, and this works for me.
just change your start script in the package.json to
{ ... "start": "CHOKIDAR_USEPOLLING=true react-scripts start" ... }

[wintercounter]

That's a workaround only. It's falling back to polling instead of using native file system events, causing 80% constant CPU usage.

[akhar]

causing 80% constant CPU usage.

Try to reduce polling interval by CHOKIDAR_INTERVAL=1000

[AhmadAbualkhail]

I moved my repos to WSL path and all working fine
\wsl$\Ubuntu-20.04\home\Username\test

[matiaslauriti]

Only @chloesun shared the solution that worked for me... so I am going to write it more straightforward:

Try adding a .env with CHOKIDAR_USEPOLLING=true on it, this fixed it for me, because I am not storing the files inside WSL but in a different disk on Windows (/mnt/d/)...

[wintercounter]

Using polling is not a solution, just a workaround as I previously mentioned. Without WSL Docker already solves this by forwarding native events (it was dixed not so long ago after years of waiting). The same should be done here.

[winzaa123]

Only @chloesun shared the solution that worked for me... so I am going to write it more straightforward:

Try adding a .env with CHOKIDAR_USEPOLLING=true on it, this fixed it for me, because I am not storing the files inside WSL but in a different disk on Windows (/mnt/d/)...

this great 👍

[rajjeet]

I moved my repos to WSL path and all working fine
\wsl$\Ubuntu-20.04\home\Username\test

This has other issues. Syncing and indexing will be very slow of intellij products.

[mdirshaddev]

I moved my repos to WSL path and all working fine
\wsl$\Ubuntu-20.04\home\Username\test

I was facing the same issue but now I am free from all these problems.

[paganjoshua]

none of these options work for me, I always see people suggesting moving the repo to the wsl path, but even projects made from scratch in my linux home dont work. Love wsl2 but man this sucks

[mdirshaddev]

none of these options work for me, I always see people suggesting moving the repo to the wsl path, but even projects made from scratch in my linux home dont work. Love wsl2 but man this sucks

That's weird but I was facing the same issue for more than 2 months. Then I tried to move my files to wsl filesystem folder I.e., now my project resides in /home of wsl directory and there seems to be working fine. I have heard about this issue why happening because we are trying to use multiple filesystem what I mean is that using windows filesystem in Linux. We should use Linux filesystem if we are working in our project.

[matiaslauriti]

What if I want an instant backup of it ? (disregard GIT or any other VCS). I use other hard drive and through /mnt I use that hard drive... This should be seamlessly and it is not...

[craigloewen-msft]

@paganjoshua please try the sample project that I listed in this comment and see if it works for you: #4417 (comment)

We have verified on the team that when projects are in the Linux file system that hot refresh will work. If it doesn't work for you I would recommend you update to the latest Windows version and if it still doesn't work please could you file a bug on this repo? Thanks!

[paganjoshua]

@craigloewen-msft thanks for the sample, tested it out and worked perfectly which left me stumped for a couple days. Turns out the problem was with the version of the module bundler I was using, which had a recently documented bug I'd never encountered so after I tried my usual tricks with the bundler I jumped to conclusions about it being WSL, my apologies!

Really excited this is working as expected and that I ended up being at fault, this is a really cool project!

[Tofandel]

@craigloewen-msft Yes but is there a way to get it to work on the Windows file system? Kinda sucks to have to downgrade to WSL1 which then prevents WSL git from working.. I'm gonna start pulling my hair out..

[wintercounter]

This is incredibly annoying, and forces many of us to use Docker with legacy Hyper-V base... There are multiple reasons not to store our files in the Linux mount, but that makes environments with file watchers completely unusable.

[itsjerryho]

Using WSL2 and faced the same issue of Hot Reloading not working for Create React App. Tried all sorts of methods (using CHOKIDAR_USEPOLLING=true before npm start, adding .env file etc) and the only way that worked for me was to shift the app folder into the WSL path.

Honestly quite disappointed with WSL2...

[zmbq]

Faced the same issue with webpack --watch. I do not want to move the sources to a WSL only path. My workaround was to run webpack from Windows instead of WSL.

[chaderenyore]

Mine is not working at all, used vue cli and it was extremely slow to even start the server. when server even started, I will make a change but it won't reload. I reloaded manually without seeing the change.

[7flash]

Mine is not working at all, used vue cli and it was extremely slow to even start the server. when server even started, I will make a change but it won't reload. I reloaded manually without seeing the change.

same here withastro/astro#2728

[rboddy]

2023 and I hate to necro this, but WSL2 on windows 11 is currently unable to HMR with Sveltekit. Any possibility of a long term fix on this?

[wintercounter]

I while ago I had enough and decided to just keep my files inside WSL to make watchers work. Since then I don't have any issues. I've also set up automated syncing of my files back to Windows, just in case the VHD image gets corrupted for whatever reason (happened before), I keep everything in Git also, so whatever, staying redundant as much as possible :D

[shallow-beach]

just to reiterate, using --watch-options-poll in my 'webpack serve' line fixed this for me.