Development server of create-react-app does not auto refresh

Question

I am following a tutorial on React using create-react-app. The application is created by create-react-app v1.3.0

create-react-app my-app

The dev server is run by

npm start

After changing the code several times, the browser is not updated live / hot reload with the changes. Refreshing the browser does not help. Only stopping the dev server and starting it over again capture the new changes to the code.

Crinkle

Are you accessing your app through http://localhost:3000/? – Alagoas

@JoeClay Yes. And the browser start and shows the page. It page itself does not get change with new editing to the code. – Crinkle

This was the only solution I could find that works on Windows 10 https://mcmap.net/q/73217/-how-to-auto-reload-files-in-node-js – Article

Answer 1

Have you seen the “Troubleshooting” section of the User Guide?
It describes a few common causes of this problem:

When you save a file while npm start is running, the browser should refresh with the updated code.

If this doesn’t happen, try one of the following workarounds:

• If your project is in a Dropbox folder, try moving it out.
• If the watcher doesn’t see a file called index.js and you’re referencing it by the folder name, you need to restart the watcher due to a Webpack bug.
• Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in “Disabling swap files creation in vim”.
• If your project path contains parentheses, try moving the project to a path without them. This is caused by a Webpack watcher bug.
• On Linux and macOS, you might need to tweak system settings to allow more watchers.
• If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an .env file in your project directory if it doesn’t exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start, the watcher uses the polling mode, as necessary inside a VM.

If none of these solutions help please leave a comment in this thread.

I hope this helps!

Bodwell

Thank you, you were dead on. I was using Vim. Setting set backupcopy=yes fixed the problem, as said in the provided links to the docs. – Crinkle

> On Linux and macOS, you might need to tweak system settings to allow more watchers. This one was the problem in my case. I've followed blog.jetbrains.com/idea/2010/04/… to fix it (it helped even I don't use IntelliJ) – Hakan

I am using VirtualBox and this solution "create .env file in your project directory if it doesn’t exist, and add CHOKIDAR_USEPOLLING=true to it" , worked for me. thank you so much – Stedt

Create .env file work for me since I am working on VM – Coalfield

:wq will help you checking whether it is the vim-related problem. – Italianate

if the CHOKIDAR_USEPOLLING=true does the trick for you consider using another env variable CHOKIDAR_INTERVAL=2000 . This limits the amount of CPU used by CHOKIDAR polling method – Contretemps

I am in elementary os and creating a .env file helped me. thanks – Knawel

Hi Dan, Would you please explain more what really chokidar is? – Alejandroalejo

moving it out of Dropbox didn't make a difference for me – Article

The CHOKIDAR_USEPOLLING=true solution worked for me when using React inside a Docker container. Thanks! – Charlacharlady

It looks like they moved the troubleshooting webpage. Would you mind updating the link? – Reich

Answer 2

I was reading a lot of unnecesary stuff.

I am using React 17.

And my problem was that the page just add new components but the browser was not refreshing the page.

If your terminal is Compiling... and then you don't see changes on the browser, you should try adding a .env file in the root path of the project and add FAST_REFRESH=false.

Hot refresh was replaced by Fast refresh by default.

Anse

Thanks, this works for me on React 17.0.1 – Chassepot

This works for me on Windows with React 17.0.1. Thanks! – Taxexempt

This was the answer for me too! Very counter intuitive that marking "Fast_Refresh=false" causes it to quickly refresh on its own – Premed

Thanks! Works on React 17.0.2 too – Liquidize

Documentation is here - create-react-app.dev/docs/advanced-configuration. FAST_REFRESH - has to be over-ridden to false else the browser does not refresh for some changes. From the documentation - "When set to false, disables experimental support for Fast Refresh to allow you to tweak your components in real time without reloading the page? – Tannate

Remember to restart the app once you add the .env file, otherwise, it will not work immediately. – Croze

Perfect, this fixes it for me on React 17.0.2 on MacOS. – Acheron

Answer 3

Adding a .env file in the base path of the project and inside add FAST_REFRESH=false.

This disables fast refresh and returns to hot reload.

If you don't want to add a .env file to your base path you can choose these options:

• "start": "FAST_REFRESH=false react-scripts start", in the package.json.
• FAST_REFRESH=false npm run start, on the command line.
• FAST_REFRESH=false, exporting it as an environment variable.

React 17

React-scrits 4

Characterize

This works on my Mac finally. Everything else didint. Only adding this one helps. Do somebody knows a root cause of this? – Walter

This worked for me also working on a headless cloud listening on 0.0.0.0 – Trihedral

Correct answer - MacOSX React app typescript – Apostasy

Did the trick for me (Ubuntu 20.04.2 and Firefox 84.02) – Fairfield

This works fine on Win10. To create a .env file in Win10 create a new file and rename it <blank>.env – Endostosis

@Walter This is due to the new version of React 17. It changed the hot reload for the fast refresh, and there are still things to polish it. – Characterize

Worked. I'm surprised there isn't an open issue on github or something. – Engelhardt

'FAST_REFRESH' is not recognized as an internal or external command, operable program, or batch file. Giving an error when I run npm start with the first option. – Deuteragonist

Answer 4

Have you tried npm start with super user permissions? I had the issue with my project and I solved it like this.

$sudo bash
#npm  start

Sidesaddle

Thanks for the answer. This did not work. Not in sudo, nor under root user. – Crinkle

Very much appreciate your effort. It solved my issue after hours of debugging – Atombomb

If npm start requires superuser permissions, something is very wrong (or you're trying to bind to a privileged port). Before running as superuser, be sure to find out why you need to do so. – Proceeds

Answer 5

In WSL2 work for me, "If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an .env file in your project directory if it doesn’t exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start, the watcher uses the polling mode, as necessary inside a VM."

Or just run: $ CHOKIDAR_USEPOLLING=true npm start

Serdab

This was the fix for me, but I actually needed to add this env config to my docker-compose.yml so it ultimately said CHOKIDAR_USEPOLLING: 'true' under the environment section – Outclass

I was using WLS and this was the fix for me. Cheers – Used

After trying everything else (on WSL2), using $ CHOKIDAR_USEPOLLING=true npm start is what finally worked. Thanks. – Correy

Answer 6

Spent few hours fixing this:

---

1 . Create a file .env (beside package.json file) add below contents:

File: .env

FAST_REFRESH=false

2 . Now, stop & start the server

(Ctrl + C to start, if in CMD, on Windows OS)
npm start

4 . Now, change some text in the App.js

File: App.js

from "Learn React"
to "Learn React And it's working"

NOTE:
1 . Server restart is important.
2 . Refresh browser tab if you dont see changes.

Witcher

How would you do this in Typescript? – Alidia

It is creating .env file, and adding that line. I guess that should not change if we use TS instead of JS, try creating that file, it might work, else there might be something else going on specific to our project. – Witcher

Oops, yeah you are correct. I just had another error in my file which was preventing the auto reload. Thanks! – Alidia

Answer 7

In my case, it was there are not enough number of file watchers. I have to change the configurations manually.

See active file watchers limit using below command on terminal.

cat /proc/sys/fs/inotify/max_user_watches

Add below line to the /etc/sysctl.conf file.

fs.inotify.max_user_watches = 524288

Apply changes using the command below.

sudo sysctl -p

Distort

this was my problem too! now resolved. thanks to this answer. – Karachi

this worked for a while. after a few hours it stopped again. why is this happening anyway – Jegar

Answer 8

I had this problem while running npm within WSL. I had the project folder in my windows Desktop folder from which npm cannot recompile automatically in WSL.
After moving the project folder to user home directory of WSL solved the issue.

Kristopherkristos

Nice, the issue with that is that you have to constantly save your code to GIT if you are just trying stuff and you don't want to use GIT and just have it in a different disk where you have all your stuff.... – Dandelion

Answer 9

just create .env file in the root of your app and add the following to it

.env

FAST_REFRESH=false

Moonlighting

Answer 10

On win10 in WSL2, I had to create the .env in the root folder, and include both

FAST_REFRESH = false
CHOKIDAR_USEPOLLING=true

My setup doesn't include any virtual machine (unless WSL2 is considered a VM?). Nevertheless the .env with the above two entries got it up and running.

Areca

Answer 11

As of react-scripts version 5.x.x CHOKIDAR_USEPOLLING=true no longer works in a .env file. You now need to use WATCHPACK_POLLING=true in the .env file in the root of your project. Per this thread.

Aten

Thanks it worked for me. This was the solution for this kind of problem with Win10 PRO/WSL2 and react-scrips 5.0.1. Excellent !!!!! – Bake

Answer 12

Find your index.js and change something in this file, for example add a white space, then save. It should show "compiling..." in your console.

Then you can modify other files and react will refresh on save.

It seems that npm is looking for changes in the index.js at the very first time, if you refactor your folder structure the index.js could be missed. Force an update in index.js file get the problem solved.

At least this has worked to me

Cinerary

Answer 13

For users of WSL2, be mindful that if your project is in your Windows System(ie C: or D:) then it won't work.

Solution 1:

access these files through the WSL share, \wsl$\DISTRO_NAME from Windows.

Solutions 2:

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

Credits to https://github.com/facebook/create-react-app/issues/10253

Mortarboard

could you explain the first solution? My projects/todo-calendar folder is placed on Desktop. I tried 2nd solution didn't work. – Estovers

This is the only solution that worked for me (WSL 2 user) – Mciver

Now WATCHPACK_POLLING=true is to be set, see github.com/facebook/create-react-app/issues/… – Mathildamathilde

Answer 14

If you are using visual studio code, you can create a new file and save it as .env. Inside, .env write FAST_REFRESH=false and save. Then, run npm start and this worked for me.

Extrusive

what does visual studio code have to to? – Wharf

Answer 15

In case people come here looking for a better solution, my issue was resolved by moving my files inside the WSL2 filesystem. Hot reloading worked straight away with no need to add an .env file.

Schuck

I moved all of the 41,150 files that my hello world application created and this worked for me. So when my repo was on Onedrive it didn't refresh, but when it was inside WSL, it refreshes properly. – Leoine

Answer 16

You might wanna add -w to {"start": "react-scripts start -w"}. I had the same issue, fixed by adding --watch.

Biologist

adding -w did the trick for me. Thanks! – Lacrimatory

Answer 17

Edit: This might not be a recommended solution. The solution worked for Docker.

If using docker with a volume mount, you need to add an .env file in the src folder with the command CHOKIDAR_USEPOLLING=true in it. However, for me this threw an error

/app/src/App.js: Cannot find module '@babel/parser'

. To resolve this new error, changing the "react-scripts": "3.4.3" to "react-scripts": "3.4.0" in the package.json file worked. So you depending on your situation you may need to add the .env file and also change the react-scripts version.

Note: To put a little more context, I was working with docker and the react app files were mounted as a volume in the docker image (so that making changes in the app are directly reflected in the app without rebuilding a docker image). The above solution is based on other solutions posted in the community for docker where people had suggested changing the react scripts version. I don't think this should be a recommended solution. However, since I was doing a tutorial series I wanted to save time and focus on other things.

Leftwards

Answer 18

If you are running your app behind a reverse proxy / nginx (e.g. to enable https locally) you also need to enable websockets so it can detect the refresh:

location /sockjs-node {
    proxy_pass http://dockerhost:5000/sockjs-node;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

Ever

Answer 19

1. In package.json, use "react-scripts": "3.4.4"

2. Delete package-lock.json

3. Run "rm -rf node_modules && npm install"

npm start

Syllabic

Answer 20

I was confused about how to create a .env file and even when i did it still didn't work. I was able to fix the issue by running this command on my terminal.

npm run start -FAST_REFRESH=false

Hopes it helps someone.

Readable

Answer 21

I ended up here seeking answers to a similar issue. Although mine was specific to one page that wasn't hot reloading. I do want to point out this is using Nextjs and it was a page under /pages named subscribe.js (/pages/subscribe.js)

It was very frustrating and admittedly took a while to figure out.

A lot of technical answers here, but interestingly, my issue was that my functional component did not start with a capital letter.

import React from 'react'

export default function subscribe() {
  return (
    <div>
      
    </div>
  )
}

Where the function name needed to start with a capital like so

import React from 'react'

export default function Subscribe() {
  return (
    <div>
      
    </div>
  )
}

As they say, you learn something new every day. In this game it's more like 10 things, the trouble is remembering what you learn ;)

Messidor

Answer 22

push your commited changes to the branch and then delete the local repo folder then clone the repo again and run npm install or yarn install whichever you prefer. this workaround solved my issue

Winsome

There is no mention about any VCS. If I understand it correctly you only suggestion reinstall libraries, or I am wrong? – Harbert

It didn't work form me :( – Gratianna

Answer 23

Try using this command

echo fs.inotify.max_user_watches=524288 
sudo tee -a /etc/sysctl.conf && sudo sysctl -p

If still, the error is there then you need to remove your node modules and again

npm install

and then

npm start

Looker

Answer 24

After creating a new project using create-react-app toolchain

Make sure to run

1. npm install, then
2. npm start

Sulk

Answer 25

"dependencies": { "react": "^17.0.1", "react-scripts": "4.0.1", } if you are using these version then create .env file on the root directory of your project and type FAST_REFRESH=false and save it. Then yarn start OR npm start.

Hendrick

Answer 26

for linux first check the number of the files allowed using:

cat /proc/sys/fs/inotify/max_user_watches

in my, it was 8192 so I just change it to 524288 and it worked perfectly.

commands use to change is:

cd /proc/sys/fs/inotify sudo nano max_user_watches

and then change no to 524288 save it and then use this command to apply the changes

sudo sysctl -p

reference from https://blog.jetbrains.com/idea/2010/04/native-file-system-watcher-for-linux/

Kuehl

Answer 27

Watch out where you add your .env file to. When you call create-react-app app-name, React will add following folder structure:

./root
   ./app-name
      ./node_modules
      ./public
      ./src
      package.json
      README.md

My problem was, I added .env file (with FAST_REFRESH=false inside) under the ./root directory. Placing the file in my ./app-name folder solved the issue.

Gratianna

Answer 28

I tried all the above suggestions, but still my react app does not refresh on code changes. Then I copied the previously working react project folder (only frontend) pasted it into the new project I am starting. Removed all the code related to old project and started using it. This solved my problem.

If this is feasible for you, you too can adopt the same method. If anyone discover a new simple solution, please post it here.

Hild

Sorry, I did not mention that I was using WSL2. And I was already using package.json file with the following line in package.json under scripts: "start": "CHOKIDAR_USEPOLLING=true react-scripts start", – Hild

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review – Contra

Answer 29

I had to run npm build everytime I wanted to refresh the app. Reinstalling node and npm didn't help. The project used a build tool called Parcel. Deleting the auto generated files such as .parcel-cache and dist resolved the issue for me.

My solution was to delete auto generated untracked/ignored files. The following git command might help: git status --ignored

Unglue

Answer 30

I had a similar problem and found a rather simple solution. Turns out I didn't ctrl + S my work. Make sure to turn on auto save in the code editor. It compiled my react project after every change I made and displayed those changes on my browser.

Schnook

Answer 31

change the start

"scripts": {

"start": "export PORT=4000 && react-scripts start -w",
"build": "GENERATE_SOURCEMAP=false react-scripts --max_old_space_size=8068 build",
"buildWin": "react-scripts --max_old_space_size=4096 build",
"test": "react-scripts test",
"eject": "react-scripts eject"

},

Scare

Answer 32

I am using React in the Yarn workspace with CRACO & TypeScript. Adding transpileOnly option worked for me.

{
       test: /\.ts$/,
       use: {
              loader: 'ts-loader',
              options: {
                    transpileOnly: true,
              },
       },
}

Assent

Answer 33

To anyone using Windows that none of the previous answers worked: make sure to check your directory path

The directories path should NOT HAVE:

• Any space
• Special Characters like ! or #

I had this issue (webpack was also showing "Compiling with 1 error" on console) because one of my directories was starting with #.

You don't need to reinstall anything, just close your editor, fix the incorrect directory, and open the project again on your editor from the new folder path, and live reload should work now.

Toluol

Answer 34

If you are on linux, check if it works with root access. If it does, stop your server and disable enforcement (for more details, man selinux).

sudo setenforce 0

Start your server again (without root), it might work.

Decrescendo

Answer 35

I came up against this same problem when starting the server through npm run start. When I changed it to npm start, it worked as expected.

Mages

Answer 36

Instead of

npm start

Run with administration permission in Linux

sudo npm start

Tertias

what's your reasoning behind using sudo with npm? – Fiddlestick

Answer 37

For Linux system you can try

sudo npm start

Earthaearthborn

Suggestions to use sudo with npm should include a warning about the security risks of doing so. – Frasch

Use the sudo command is a very irresponsability – Recruit