11

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?

julz oh
  • 285
  • 6
  • 17

3 Answers3

14

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.

NotTheDr01ds
  • 15,620
  • 5
  • 44
  • 70
  • This solved my problem.. spent the whole day trying to tweak things in the react project, also thought that it might be issue with webpack.. and its actually WSL2.. thanks so much – Shanq Yeet Feb 10 '22 at 12:36
  • Using solution-1, placing the code in /home solved it. Makes sense, having the code in a mounted folder made it all slowed & sometimes unaccessible for polling. Hosting it in /home and such linux-specific (non mounted) solved it. Thanks @notTheDr01ds – Satya Kalluri Aug 01 '23 at 16:38
6

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

Wesley Cheek
  • 1,058
  • 12
  • 22
2

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.

vibhanshu chauhan
  • 31
  • 1