WSL 2: ReactJS not reloading after saved. [Solved]

[PrajjwalDatir]

Is your proposal related to a problem?

WSL2 : ReactJS not reloading after saved.

I recently installed WSL 2 but when I create an app using create-react-app and use npm start the app was’t reloaded when I edited and saved some file

Describe the solution you'd like

I want to use Hot Reloading on my Projects located in Windows file system.

WSL2 changed the file sharing protocol, from using their own custom developed protocol using the 9P protocol, which does not support file changes event for Create React App.

Describe alternatives you've considered

To FIX this issue : You can put your code on the Linux file system (example : in your user’s home directory ), and access these files through the WSL share, \wsl$\DISTRO_NAME from Windows.

Additional context

I wrote everything properly again here

https://prajjwaldatir.medium.com/create-react-app-not-working-62fc9fc4368b

[bennettdams]

Did you try it out with the CHOKIDAR_USEPOLLING environment variable?

[PrajjwalDatir]

@bennettdams CHOKIDAR_USEPOLLING is if I'm running my react app inside a VM right!?

I tried all other troubleshooting methods, none of them worked.

I'm not running my project inside VM so why & how do I use CHOKIDAR_USEPOLLING=true ?

[bennettdams]

@PrajjwalDatir "VM" is just the example the CRA team used for their documentation there. Really, Chokidar is a file watcher for Node, so it handles the "proxy" part of your development setup (remote container, WSL, VM, etc.).
How do I know? Just last week I set up a project with VS Code's Remote Containers, which had exactly the same problem you described here. With Chokidar, my changes are actually noticed by VS Code.

To quickly test it out, just change your start script in the package.json to
{ ... "start": "CHOKIDAR_USEPOLLING=true react-scripts start" ... }

[PrajjwalDatir]

Thanks! It works now 🕺
#10197 is the parent issue of this, so I'm closing this issue.

For future readers,
Inside your package.json

find

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

and replace it with

"scripts": {
    "start": "CHOKIDAR_USEPOLLING=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

[vivek-settlemint]

I moved my code from the mounted file system to ubuntu file system in ~/home and it worked!

[resyfer]

I believe this issue happens for stuff that use the Chokidar package... React, Vue, Nodemon....all don't reload on save

[nurshom]

Thanks! It works now 🕺 #10197 is the parent issue of this, so I'm closing this issue.

For future readers, Inside your package.json

"scripts": {
    "start": "CHOKIDAR_USEPOLLING=true react-scripts start",
  }

This didn't solve the issue for me. My situation remains same as described in the original issue description.

I have also tried the CHOKIDAR_USEPOLLING=true in a .env file (technically the same thing as this solution) to no effect.