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

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

Did you try it out with the CHOKIDAR_USEPOLLING environment variable?

@bennettdams

@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 ?

@PrajjwalDatir

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

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

Update "start" to auto-reload on WSL

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

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

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.

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.

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?

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.

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.

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!

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

how do I do this?

@danielcaze

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

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

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 ^^

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.

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

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!

chore: add missing environment variable to watch properly

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!

[frontend] Fix: auto reload

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

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

Ive struggled with reloading a react project with docker. In my compose.yml file adding

environment:
      - CHOKIDAR_USEPOLLING=true

Didnt enable reloading through docker.
Changing this to

environment:
      - WATCHPACK_POLLING=true

Fixed that.

My question now is why is there no documentation on WATCHPACK_POLLING?

Navigation Menu

Repository navigation

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

Is your proposal related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context

25 remaining items

Is your proposal related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Is your proposal related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Activity

bennettdams commented on Dec 17, 2020

PrajjwalDatir commented on Dec 18, 2020

bennettdams commented on Dec 18, 2020

PrajjwalDatir commented on Dec 19, 2020

vivek-settlemint commented on Oct 12, 2021

resyfer commented on Oct 13, 2021

nurshom commented on Dec 29, 2021

sushmitg commented on Dec 31, 2021

archit11111 commented on Jan 2, 2022

sushmitg commented on Jan 3, 2022

25 remaining items

adityavartak07 commented on Jun 26, 2022

lucaszarza commented on Jul 16, 2022

danielcaze commented on Aug 3, 2022

87prashant commented on Aug 3, 2022

ianpegg commented on Sep 26, 2022

HuyyNguyenz commented on Sep 29, 2022

jerlam06 commented on Oct 27, 2022

hoa-nguyen-bk commented on Nov 21, 2022

olsonperrensen commented on Dec 7, 2022

gaurpulkit commented on Mar 15, 2023

independenceee commented on Jul 4, 2023

Is your proposal related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context

GabrielFMPinheiro commented on Jan 23, 2024

LanPodder commented on Apr 27, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions