Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
PrajjwalDatir opened this issue Dec 16, 2020 · 47 comments
Closed

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

PrajjwalDatir opened this issue Dec 16, 2020 · 47 comments

Comments

@PrajjwalDatir
Copy link

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
Copy link

Did you try it out with the CHOKIDAR_USEPOLLING environment variable?

@PrajjwalDatir
Copy link
Author

@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
Copy link

bennettdams commented Dec 18, 2020

@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
Copy link
Author

PrajjwalDatir commented Dec 19, 2020

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"
  }

@PrajjwalDatir PrajjwalDatir changed the title WSL 2: ReactJS not reloading after saved. WSL 2: ReactJS not reloading after saved. [Solved] Dec 19, 2020
goscott added a commit to Make-Fun-Stuff/website that referenced this issue Oct 2, 2021
I'm developing on the Windows subsystem for Linux,
and the dev server wasn't auto-reloading when I
made changes to the site. Followed the advice here
to get a fix:

facebook/create-react-app#10253
@vivek-settlemint
Copy link

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

@resyfer
Copy link

resyfer commented Oct 13, 2021

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

@nurshom
Copy link

nurshom commented Dec 29, 2021

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.

@sushmitg
Copy link

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.

I am facing the Same Issue.

@archit11111
Copy link

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.

I am facing the Same Issue.

Same Issue here as well. Are you on Windows 11?

@sushmitg
Copy link

sushmitg commented Jan 3, 2022

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.

I am facing the Same Issue.

Same Issue here as well. Are you on Windows 11?

Yes I am. My projects folder was placed on Desktop means in C: drive after some research I found out I need to place the project in linux folder itself. So I moved the project to linux folder i.e., "wsl\Ubuntu\home{$username}" and it worked even without CHOKIDAR_USEPOLLING=true . hope it helps.

@archit11111
Copy link

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.

I am facing the Same Issue.

Same Issue here as well. Are you on Windows 11?

Yes I am. My projects folder was placed on Desktop means in C: drive after some research I found out I need to place the project in linux folder itself. So I moved the project to linux folder i.e., "wsl\Ubuntu\home{$username}" and it worked even without CHOKIDAR_USEPOLLING=true . hope it helps.

Thanks! But I think it should have worked just using CHOKIDAR_USEPOLLING=true as many have said this solves the issue. But as pointed out here - https://stackoverflow.com/questions/69759267/docker-not-detecting-changes-for-react-app-in-windows, maybe this issue might be specific to windows 11

@nurshom
Copy link

nurshom commented Jan 10, 2022

Thanks! But I think it should have worked just using CHOKIDAR_USEPOLLING=true as many have said this solves the issue. But as pointed out here - https://stackoverflow.com/questions/69759267/docker-not-detecting-changes-for-react-app-in-windows, maybe this issue might be specific to windows 11

I am using Windows 10 with WSL2/Ubuntu 20.04 and experiencing the same issue. So it might not be specific to W11. As we see from others' comments, using CHOKIDAR_USEPOLLING=true should have fixed it but it hasn't for us. Which tells me the issue may have a different origin for some of the cases.

@KolyanLock
Copy link

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"
  }

Does not work :(

@ianisms
Copy link

ianisms commented Jan 26, 2022

+1 none of the proposed solutions are working for me on Win 11 WSL, node v17.4.0, npm v8.3.2, create-react-app v5.0.0, react v17.0.2

@chadlyalan
Copy link

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.

I am facing the Same Issue.

Same Issue here as well. Are you on Windows 11?

Yes I am. My projects folder was placed on Desktop means in C: drive after some research I found out I need to place the project in linux folder itself. So I moved the project to linux folder i.e., "wsl\Ubuntu\home{$username}" and it worked even without CHOKIDAR_USEPOLLING=true . hope it helps.

This is what I had to do to get it working again for me. Nothing else was working. Thanks for the advice.

@MubashirullahD
Copy link

Can confirm for Windows 11 with WSL2; having a react project; that the Chokidar thing works. Once I added it, I did npm start again. Adding changes and then saving automatically brings the changes. Relatively faster than restarting the whole thing. Many thanks.
image

@Workata
Copy link

Workata commented Mar 11, 2022

I had the same problem with hot reload on WSL even after changing package.json ("start": "CHOKIDAR_USEPOLLING=true react-scripts start").

After changing react-scripts version (and then npm install) hot reload works again.

"dependencies": {
//...
"react-scripts": "4.0.3", // previously I had 5.0.0
//...
}

@Bizzle-Dapp
Copy link

Bizzle-Dapp commented Mar 11, 2022

Good evening everyone,
Tonight I bring you an alternative to the madness.

If running Win10/Win11 and running Ubuntu WSL2, you will find that the Windows file system has a specific file directory that acts as this VM.

Open file explorer and you can navigate to this directory with \\wsl$ in the search.

You will notice this directory has a folder titled the Ubuntu you are running. Within this folder will be a /mnt directory. Inside, once more, is ./wsl.

This is the folder you should run your project from.

Copy the contents of your project here, open it with your IDE to verify you have permission to do so.

Once it's open, you will need to recursively update permissions on the folder to ensure you have privilege to run your react scripts start command using npm run start.

To do this:
Open Powershell with elevated privilege on your local system. Run your Ubuntu exe. For me it was:
image

Navigate to the wsl directory, example:
image

Run this command to update rights, recursively on the directory:
sudo chmod -R +x ./<YourProjectName>
You'll be asked to authenticate, do as the computer asks 👌

Presto.

docker-compose up your project from VSCode or where ever you are deving. If your docker-compose.yml is configured with the correct chokidar_usepolling environment variable, you're good to go.

Hope this helps us Windows users.

@Aestersa
Copy link

Good evening everyone, Tonight I bring you an alternative to the madness.

If running Win10/Win11 and running Ubuntu WSL2, you will find that the Windows file system has a specific file directory that acts as this VM.

Open file explorer and you can navigate to this directory with \\wsl$ in the search.

You will notice this directory has a folder titled the Ubuntu you are running. Within this folder will be a /mnt directory. Inside, once more, is ./wsl.

This is the folder you should run your project from.

Copy the contents of your project here, open it with your IDE to verify you have permission to do so.

Once it's open, you will need to recursively update permissions on the folder to ensure you have privilege to run your react scripts start command using npm run start.

To do this: Open Powershell with elevated privilege on your local system. Run your Ubuntu exe. For me it was: image

Navigate to the wsl directory, example: image

Run this command to update rights, recursively on the directory: sudo chmod -R +x ./<YourProjectName> You'll be asked to authenticate, do as the computer asks 👌

Presto.

docker-compose up your project from VSCode or where ever you are deving. If your docker-compose.yml is configured with the correct chokidar_usepolling environment variable, you're good to go.

Hope this helps us Windows users.

This helped for me on Windows 11, Thank you so much!
But i also needed to create project again to run server.

@romainiac
Copy link

I had the same problem with hot reload on WSL even after changing package.json ("start": "CHOKIDAR_USEPOLLING=true react-scripts start").

After changing react-scripts version (and then npm install) hot reload works again.

"dependencies": { //... "react-scripts": "4.0.3", // previously I had 5.0.0 //... }

I have been debugging for 4 hours, downgrading rom 5.0 5o 4.0.3 solved the problem. I cant thank you enough. I am 4 whiskeys in pulling my hair.

@audryhsu
Copy link

I had the same problem with hot reload on WSL even after changing package.json ("start": "CHOKIDAR_USEPOLLING=true react-scripts start").

After changing react-scripts version (and then npm install) hot reload works again.

"dependencies": { //... "react-scripts": "4.0.3", // previously I had 5.0.0 //... }

This is what ultimately solved it for me, after trying trying both CHOKIDAR_USEPOLLING=true and FAST_REFRESH=false.

@iiian
Copy link

iiian commented Apr 24, 2022

Good evening everyone, Tonight I bring you an alternative to the madness.

If running Win10/Win11 and running Ubuntu WSL2, you will find that the Windows file system has a specific file directory that acts as this VM.

...

I am now personally extremely skeptical of this appproach. Would-be adherents beware. Twice now upon resetting my computer, it's completely blown away the directory I put in /mnt/wsl/. The first time I didn't quite realize it, because I used File Explorer to copy files from my Documents folder. The second time I just did a git clone to instantiate the files. I just restarted my machine and now the git clone is gone along with all of my work. 👎

-- edit --
could be a "me" problem, I didn't run chmod -R +x. But still, that seems like a dumb thing to have to do, esp when Ubuntu gives you a /home/user_name directory to work with. Additionally, I'm no linux expert, the only chmodding I ever do is to make scripts executable. If you're like me, be careful.

-- edit 2 --
The chmod didn't help. Long live /home/user_name.

$ cd /mnt/wsl
$ mkdir was_it_my_fault
$ chmod -R +x ./was_it_my_fault

# restarts machine

$ cd /mnt/wsl
$ ls -la
/mnt/wsl > la  
total 0
drwxr-xr-x 4 root root 100 Apr 24 02:03 docker-desktop
drwxr-xr-x 3 root root  60 Apr 24 02:03 docker-desktop-bind-mounts
drwxr-xr-x 6 root root 120 Apr 24 02:03 docker-desktop-data
# guess not maybe

@nathanpovo
Copy link

nathanpovo commented May 16, 2022

Version 5.x.x of react-scripts does not work with CHOKIDAR_USEPOLLING because there was a breaking change in webpack and that variable is no longer supported. The newly added variable WATCHPACK_POLLING has to be used instead.

Inside your package.json find

"scripts": {
    "start": "react-scripts start",

and replace it with

"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",

See #12397 for more info

@bhat-anusha
Copy link

The reason that version 5.x.x of react-scripts does not work with CHOKIDAR_USEPOLLING is because there was a breaking change in webpack and that variable is no longer supported. The new variable WATCHPACK_POLLING has to be used instead.

Inside your package.json find

"scripts": {
    "start": "react-scripts start",

and replace it with

"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",

See #12397 for more info

This worked for me, thank you very much :)

@RohanVDeshpande
Copy link

Good evening everyone, Tonight I bring you an alternative to the madness.
If running Win10/Win11 and running Ubuntu WSL2, you will find that the Windows file system has a specific file directory that acts as this VM.
...

I am now personally extremely skeptical of this appproach. Would-be adherents beware. Twice now upon resetting my computer, it's completely blown away the directory I put in /mnt/wsl/. The first time I didn't quite realize it, because I used File Explorer to copy files from my Documents folder. The second time I just did a git clone to instantiate the files. I just restarted my machine and now the git clone is gone along with all of my work. 👎

-- edit -- could be a "me" problem, I didn't run chmod -R +x. But still, that seems like a dumb thing to have to do, esp when Ubuntu gives you a /home/user_name directory to work with. Additionally, I'm no linux expert, the only chmodding I ever do is to make scripts executable. If you're like me, be careful.

-- edit 2 -- The chmod didn't help. Long live /home/user_name.

$ cd /mnt/wsl
$ mkdir was_it_my_fault
$ chmod -R +x ./was_it_my_fault

# restarts machine

$ cd /mnt/wsl
$ ls -la
/mnt/wsl > la  
total 0
drwxr-xr-x 4 root root 100 Apr 24 02:03 docker-desktop
drwxr-xr-x 3 root root  60 Apr 24 02:03 docker-desktop-bind-mounts
drwxr-xr-x 6 root root 120 Apr 24 02:03 docker-desktop-data
# guess not maybe

Agree -- I don't think is the best approach. According to this post, /mnt/wsl is mounted as tmpfs so it will get wiped everytime you restart your computer. You probably shouldn't be using this directory long-term for development.

@RohanVDeshpande
Copy link

Also, see #10253 (comment) for a solution that worked for me.
Adding WATCHPACK_POLLING=true worked while modifying CHOKIDAR_USEPOLLING and FAST_REFRESH flags (like previous comments suggested) did not.

@hubologist24
Copy link

WATCHPACK_POLLING=true works thanks

@rehlucena88
Copy link

"scripts": {

Fiz isso e deu certo no meu tbm

@michalbidzinski1
Copy link

michalbidzinski1 commented Jun 2, 2022

Although WATCHPACK_POLLING=true works, i still have to refresh the page to see the results. Any ideas?
Im running my react + backend on docker with nginx and docker-compose btw.

@vishnupeas
Copy link

Version 5.x.x of react-scripts does not work with CHOKIDAR_USEPOLLING because there was a breaking change in webpack and that variable is no longer supported. The newly added variable WATCHPACK_POLLING has to be used instead.

Inside your package.json find

"scripts": {
    "start": "react-scripts start",

and replace it with

"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",

See #12397 for more info

this worked for me, last time hot reload stopped working, the fix for me was reinstalling WSL ubuntu.

@87prashant
Copy link

87prashant commented Jun 23, 2022

@nathanpovo thanks!! you are a life saver, I was finding solution for weeks.
Worked with WSL2.

@87prashant
Copy link

@michalbidzinski1

Although WATCHPACK_POLLING=true works, i still have to refresh the page to see the results. Any ideas? Im running my react + backend on docker with nginx and docker-compose btw.

What I am experiencing is that refreshing on changes takes a little longer (about 3-5 sec).
Could you check if that's the case with you?

@adityavartak07
Copy link

I had the same problem with hot reload on WSL even after changing package.json ("start": "CHOKIDAR_USEPOLLING=true react-scripts start").

After changing react-scripts version (and then npm install) hot reload works again.

"dependencies": { //... "react-scripts": "4.0.3", // previously I had 5.0.0 //... }

Dude man was searching for a solution, since 4 hrs, finally this worked. Thanks man.

@lucaszarza
Copy link

CHOKIDAR_USEPOLLING=true

I had the same problem with hot reaload on WSL, after using the "CHOKIDAR_USEPOLLING=true" on package-json:

"dev": "CHOKIDAR_USEPOLLING=true vue-cli-service serve",

It Works, althought it's taking a lot of time to show the changes on screen.

P.S. I'm using vue

but thanks anyway!

@danielcaze
Copy link

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

how do I do this?

@87prashant
Copy link

@danielcaze
Not sure about that, but you can try this: #10253 (comment)
It worked for me👍

@ianpegg
Copy link

ianpegg commented Sep 26, 2022

"start": "WATCHPACK_POLLING=true react-scripts start",

After a couple of hours of headscratching this solved the issue for me in my Homestead VM. Thank you!

@HuyyNguyenz
Copy link

Version 5.x.x of react-scripts does not work with CHOKIDAR_USEPOLLING because there was a breaking change in webpack and that variable is no longer supported. The newly added variable WATCHPACK_POLLING has to be used instead.

Inside your package.json find

"scripts": {
    "start": "react-scripts start",

and replace it with

"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",

See #12397 for more info

Thank you so much, it's finally working again ^^

@jerlam06
Copy link

What worked the best for me was to reinstall react-scripts, I first tried to replace the latest version with the 4.0.3, it worked, then I tried the latest (5.0.1) again and it also worked. However, make sure to MANUALLY trigger the first refresh of your app after reinstalling react-scripts, otherwise the auto refresh will not work.

@hoa-nguyen-bk
Copy link

due to some answer in stackoverflow, that I'm so sorry for forgetting who answered that, I could fix this bug because I set up my wsl from version 2 to version 1.
Here is my command in Powershell (with administrator, absolutely)

wsl --set-version ubuntu 1

@olsonperrensen
Copy link

olsonperrensen commented Dec 7, 2022

Version 5.x.x of react-scripts does not work with CHOKIDAR_USEPOLLING because there was a breaking change in webpack and that variable is no longer supported. The newly added variable WATCHPACK_POLLING has to be used instead.

Inside your package.json find

"scripts": {
    "start": "react-scripts start",

and replace it with

"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",

See #12397 for more info

Thank you! Working now.

Edit: Docker Toolbox also supported!

KennethTrecy added a commit to KennethTrecy/docker_mocha that referenced this issue Dec 22, 2022
@gaurpulkit
Copy link

Version 5.x.x of react-scripts does not work with CHOKIDAR_USEPOLLING because there was a breaking change in webpack and that variable is no longer supported. The newly added variable WATCHPACK_POLLING has to be used instead.

Inside your package.json find

"scripts": {
    "start": "react-scripts start",

and replace it with

"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",

See #12397 for more info

If anyone is using WSL 2 and react-scripts, then THIS IS THE WAY!

Winand added a commit to Winand/realtime-chat-go-react that referenced this issue Apr 2, 2023
@independenceee
Copy link

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

WATCHPACK_POLLING=true in .env files

@GabrielFMPinheiro
Copy link

Version 5.x.x of react-scripts does not work with CHOKIDAR_USEPOLLING because there was a breaking change in webpack and that variable is no longer supported. The newly added variable WATCHPACK_POLLING has to be used instead.

Inside your package.json find

"scripts": {
    "start": "react-scripts start",

and replace it with

"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",

See #12397 for more info

Thx so much! This worked using colima on Mac

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests