React hot reload not working for changes made in index.js

[gulshanmudgal]

Environment

Windows build number: Microsoft Windows [Version 10.0.19042.630]
Your Distribution version: Ubuntu 20.04
Whether the issue is on WSL 2 and/or WSL 1: WSL2

Steps to reproduce

NodeJs version: v15.2.0
NPM version: 7.0.8

1. Create a new react app using the following command: npx create-react-app test
2. Open the newly created app in VSCode.
3. Start the app by running the command: npm start
4. Observe the app starts correctly.
5. now make any text change in App.js and observe the changes are reflected on the UI.
6. Now try to make any change in index.js(add a new paragraph or text), observe the changes are not reflected on the UI. now refresh the page manually observe the changes are reflected on the UI now.

Expected behavior

Changes made in index.js is not reflecting on the UI, hence hot reloading fails. For all other files, hot reload works just fine and changes are reflected on the UI, once code is successfully compiled.

Actual behavior

After making changes in index.js, the browser window doesn't refresh and hence have to manually refresh the page to view the changes made in index.js.

[craigloewen-msft]

Hi @gulshanmudgal is your project store on your Windows file system or inside of your Linux file system? (i.e: Is it in /mnt/c ? )

If it is in the Windows file system, I believe you're running into the fact that the Plan 9 server in WSL 2 does not support file watching on Windows files. As a workaround I'd recommend you place your files into the Linux file system (Plus you'll get a performance boost!) Here's our issue tracking this request: #4739

[Daniel-K-Miller]

I'm getting the exact same behaviour and my files are within the Linux file system. As @gulshanmudgal has said for other files hot reloading works but when I edit index.js it does not hot reload requiring a manual refresh.

[gulshanmudgal]

No, My files are already in the Linux file system.

[craigloewen-msft]

I am unable to reproduce your problem, I'm able to use hot reload inside of the Linux file system.
Would you be able to share repro steps here? Are you able to share a project configuration where hot reload doesn't work so that I could try it out to reproduce it locally?

[gulshanmudgal]

I have created a dummy app here: https://github.com/gulshanmudgal/wsl-6255
I have already mentioned the steps in the description, the same is applicable.

[gulshanmudgal]

Also, I have provided comments in the index.js and test.js files. code is available at the github link.

[craigloewen-msft]

I tried the project that you sent me and wasn't able to get hot reload working there either.

However, I do have hot reload working with other projects.

It seems like this overall feature is working, but might not be working for your specific project. @gulshanmudgal could you try using the repro that I used to create this gif and see if you are able to use hot reload? Here's the source code.

If you are able to have hot reload there, then it seems like this might be a Linux tooling specific problem.

[gulshanmudgal]

the one you shared seems to work, your project is with Gatsby.js, but the Vanilla React one is not working. I can reproduce this issue consistently with Vanilla React.

[thernstig]

Have you taken a look here and tried all these steps?
https://stackoverflow.com/questions/42014924/react-create-app-hot-reload-is-not-always-working-on-linux?rq=1

[gulshanmudgal]

Have you taken a look here and tried all these steps?
https://stackoverflow.com/questions/42014924/react-create-app-hot-reload-is-not-always-working-on-linux?rq=1

Yes, I have, but with no luck.

[jdim]

Hello, I've caught the same issue. webpack-dev-server watching worked fine 3 hours ago, but now some files in the project are watched, some not (but earlier they were watched, all worked fine).
Environment:

Windows: Windows 10 Pro [10.0.18363, then updated to 19042.630]
Your Distribution version: Ubuntu 20.04.1 LTS
Whether the issue is on WSL 2 and/or WSL 1: WSL2

My project inside Linux system (projects dir /home/dmitriy/git).
I use VSCode with ms-vscode-remote.remote-wsl extension.
Value of /proc/sys/fs/inotify/max_user_watches = 524288

I don't get any errors, it just not working.

I can't provide the project to reproduce, but might be able to send some logs.

UPD: after updating 10.0.18363 to 19042.630, the problem persist only for new files

UPD: Same issue if I edit files with vim in the terminal, watching not works.
File path src/components/IconsList/IconsList.tsx

[craigloewen-msft]

I'm able to use hot reload on other projects as well that aren't gatsby based (like this calculator demo).

It seems like this error might be based on your project. The only other thing I could think of is something within the localhost relay, but I'm unable to repro this error. For the sanity of tracking errors on this Github page I'm going to mark this as closed since I can't find any relevant error, but please reopen it if you can determine any specific repro steps, or @ me here so I can see it. Thanks for filing this!

[jdim]

@craigloewen-msft Thanks for the quick response, the problem with new files was in my project: I didn't import newly created files in other project files, so 'webpack-dev-server' didn't start rebuilding when I changed them.

This is a checklist for troubleshooting, might be useful for those, who get a similar problem with file watching/hot reload in Windows WSL:

1. If you use webpack-dev-server, your newly created files must be imported into some project files (included in dependencies tree).
2. Move files to wsl container filesystem, i.e. /home/user/git/myproject, as a bonus, you get drastically increased performance. The folder can be easy found in a path like \\wsl$\Ubuntu-20.04\home\user\git\myproject.
   Or, when you in the project folder, write in terminal

explorer.exe .

3. Check max_user_watches:

cat /proc/sys/fs/inotify/max_user_watches

For a seamless Visual Studio Code Remote Development experience a new limit of 524288 is suggested. That would allow to watch up to 524288 files, using up to 540 MiB kernel memory.

More info #4293

4. Try to edit & save files using a terminal text editor (vim, nano, etc) instead VSCode, to verify what problem is not in VSCode or Remote - WSL extension or VSCode Server

5. Use WSL2

6. Update windows to the latest build (19042.662 at this moment)

[ezawadzki]

My script react-scripts start works with last Windows build (19042.685), WSL2 and setting the right WSL version ton an existing version :
wsl --set-version <distribution name> <versionNumber>

[iamchubko]

I'm using Git bash for Windows but had been facing the same problem. And this is how I solve it with React 17.0.1
https://stackoverflow.com/a/65543913/13285338. You can read advanced-configuration.md (url) in React's docs to learn what it does.
After that remember to rerun npm start

@craigloewen-msft With the same issue as OP explained, for me, the problem was with React update. So it can be possible solution for others.

[DraconianLore]

I was having this same issue, until I created a .env file in my project and added CHOKIDAR_USEPOLLING=true, as WLS2 seems to be treated as a VM so polling mode is necessary

[zgameboyz]

I was having this same issue, until I created a .env file in my project and added CHOKIDAR_USEPOLLING=true, as WLS2 seems to be treated as a VM so polling mode is necessary

You hero, this worked for me :)

[wellingtonsilverio]

Eu estava tendo esse mesmo problema, até que criei um .envarquivo em meu projeto e adicionei CHOKIDAR_USEPOLLING=true, como WLS2 parece ser tratado como uma VM, então o modo de pesquisa é necessário

Funcionou perfeitamente, obrigado!

[hazartilirot]

Well, I've just had the same issue. Windows 10 + WSL 2. Here's my question on StackOverflow
https://stackoverflow.com/questions/70536493/hot-reloading-page-in-react-17-0-2-within-a-container-doesnt-work

The thing is... you just have to move your project to \wsl$\Ubuntu-20.04\home<USERNAME>\YOURPROJECT

[KayvT]

@hazartilirot I can't seem to find the \wsl in my CLI, can you help with this? Thank you..

I may have misunderstood.
I am running windows 10. I have docker running a container, and I am running a react 17.0.1 inside of that container. The files are on my windows machine, not the container.

Excuse me if this is basic, I am quite junior with all this.

[wendelsantosd]

Hi @gulshanmudgal is your project store on your Windows file system or inside of your Linux file system? (i.e: Is it in /mnt/c ? )

If it is in the Windows file system, I believe you're running into the fact that the Plan 9 server in WSL 2 does not support file watching on Windows files. As a workaround I'd recommend you place your files into the Linux file system (Plus you'll get a performance boost!) Here's our issue tracking this request: #4739

Work for me. Thx !

[websharkdev]

guys, you just needed to disable CORS