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

T

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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