Development Server of Create-React-App Does Not Auto Refresh

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

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!

Development server of create-react-app stops auto refresh when meeting an error detected by ESLINT

It turned out that the problem is not related with ESlint, but with react-scripts version.

Sadly, it took me several days to figure out from where the problem is coming.

First i was thinking that the problem was related with ESlint, but i was wrong.

The Development server doesn't refresh even without ESlint in the project.

After my research i found that the problem comes from react-script versions 4.0.0 and 4.0.1.

The only one workaround at this moment (when react-script 4.0.1 is available and don't work) is to downgrade to react-script 3.4.4.

To achieve that i use following steps:

In the project folder:

1. In "package.json" file change react-scrips version: "react-scripts": "3.4.4"

2. Delete "package-lock.json" file

3. Delete whole folder "node_modules"

4. In the Terminal: npm install

5. In the Terminal: npm start

After these steps, the Development server again refresh like a charm :)

I want to note that the steps above must to work for people which use react-scripts 4.0.0 or 4.0.1 and had the refresh problems from the Development server.

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

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!

React create app hot reload is not always working on linux

When npm start doesn't detect changes, below are the common troubleshooting steps provided in the create-react-app documentation - link.

While an app is running with npm start and updating code in the editor should possibly refresh the broswer with the updated code.
If this doesn't happen, try one of the following workarounds:

  1. If the project files are directly synced to your local system from a cloud storage like Dropbox or Google Drive and you're trying to run the app in them directly, try moving it out.
  2. Due to Webpack bug, you may need to restart the watcher. If the watcher doesn't detect the index.js and you're referencing it by the folder name.
  3. Safe write feature in editors like Vim and IntelliJ currently breaks the watcher. You will need to disable it.
  4. Due to Webpack watcher bug, projects with path contains parentheses causes issue, try moving the project to a path without them. .
  5. To allow more watchers in Linux and macOS, you might need to tweak system settings.
  6. 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.
  7. Could try increasing max_users_watches- link

More references:

  • Issue Tracker 1
  • Troubleshooting webpack
  • Issue Tracker 2 - Webpack polling

ASP.NET 6 with ReactJS - browser not refreshing on hot reload with react-scripts 5.0.0

Update

It's likely a bug introduced in CRA5: issue

Using WDS_SOCKET_PORT=0 will allow the solution to work with all debug configurations.

=================================================

I notice that, after upgrading to CRA5, the react dev client starts to respect the current page's protocol.
That is, if you are debugging your asp.net core project using https locally, the react dev client will also try to connect to node dev server with wss(websocket over TLS) which is not enabled by default.
There are several ways to get around with this, the simplest way would be:

  1. create a file with name .env.development in the same folder where lies your package.json.
  2. put WDS_SOCKET_PORT=<your asp.net core app port> in .env.development you just created. <your asp.net core app port> should be 5001 by default if you are using the SPA template generated by dotnet cli.

This will allow the ws connection initiated by react dev client to be proxified to node dev server with UseReactDevelopmentServer middleware.

Create react app, reload not working

After too many searches I found Webpack watch uses inotify to observe file changes and in ubuntu it's set to a low value. a quick fix:

sudo -i
echo 1048576 > /proc/sys/fs/inotify/max_user_watches
exit

If you want change it permanently (from Ronald answer):

echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf
sudo sysctl -p

You may also need to add a .env file in the root directory of your project with this line "FAST_REFRESH=false" as noted in create react app docs.

echo "FAST_REFRESH=false\n" | cat > .env


Related Topics



Leave a reply



Submit