WSL 2 , React not reloading with file changes?

user_14954401 0
Viewed 1956

I recently installed WSL 2 but when I create an app using create-react-app and use npm start the app is not reloaded when I edit some file. Am I missing something?

wsl-2
3 Answers

In my experience, this occurs when your source is on a Windows drive (e.g. /mnt/c) since the driver that WSL uses for those drives doesn't yet support inotify. See this answer for more details on a related issue.

There are at least two possible solutions:

  • The recommended solution if you need WSL2 is to place your files on the ext4 root filesystem for WSL. E.g. somewhere under /home/, for instance. This has the added advantage of being much faster than the Windows drive.

  • Or you can convert your instance to WSL1, which does support inotify on the Windows drives, and is much faster when dealing with files there. You can also keep a WSL1 and a WSL2 copy around if you want. They both serve different purposes, but for most React/web development, I think you'll find WSL1 a better fit.

    You can back up your existing distribution with wsl --export <distroname> <filename.tar>, and then change to WSL1 with wsl --set-version <distroname> 1. Or you can re-import the backup as wsl --import <newDistroName> <directory> <filename.tar> --version 1.

  • Also, in my testing for that other answer, when running VSCode and running a watcher in the VSCode terminal, it seemed to work for me. I'm still suspicious this was a "false positive" of sorts, but you might want to give it a shot.

user_118109330

I was also having the problem with hot reloading in WSL2 . I tried almost every solution present on github , stackoverflow and where not . Trying to fix it from CHOKIDAR_USEPOLLING=true to setting FAST_REFRESH = false in .env to changing network setting using netsh and what not for 2 days . finally decided to revert to WSL1. I think it's because WSL 2 is running as a hyper-v virtual machine. If you're using WSL2 you should revert to WSL1 for now.

wsl --set-version Ubuntu-18.04 1

Run the above command in Powershell. And check version of WSL after using

wsl -l -v

if it's version 1 now you are good to go.

user_191574320

Since react-scripts 5.x.x we can put WATCHPACK_POLLING=true in the .env file in the root of your project to solve this issue. See this issue thread.

user_119225670
Related