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

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.

Answers:

Answer

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!

Answer

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
Answer

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.

Answer

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.

Answer

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

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

Answer

For Linux system you can try

sudo npm start
Answer

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
Answer

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

Answer

Instead of

npm start

Run with administration permission in Linux

sudo npm start
Answer

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

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

Answer

Install Addon Classic Cache Killer on Chrome, 100% will solve the problem.

Answer

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

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

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.