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.

Solution 1:

I was reading a lot of unnecesary stuff.

I am using React 17.

And my probrem 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 for Fast refresh by default.

Solution 2:

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!

Solution 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

Solution 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

Solution 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