0

I start React.js project in VS Code by

npm start

The development server of create-react-app stops when encountered an error by ESlint. And when an error is fixed it never auto refresh the page. It is necessary to refresh browser's page manually by push refresh button or F5.

For example: if i remove some of the closing brackets (which is error by default, not configured by ESlint), the development server stops, but when i place back the bracket, the server automatically refresh the page. But when the error is defined by ESlint (for example "no-trailing-spaces") the development server stops and after fixing the errors it never refresh the page..

Here are the results in pictures:
the server stops when encountered an error by ESlint

after the errors are fixed, the server still show error and never refresh automatically

p.s. Actually the server refresh ONLY one time on the first fixed error! On every following fixed error, the server never refreshing!

Is there are any way to fix this problem?

Many thanks!

emil iliev
  • 11
  • 2

2 Answers2

0

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.
mahdi ashori
  • 515
  • 4
  • 13
  • The development server itself refresh the page, but when in the code there are some errors which is defined as "errors" by ESlint, then the server stops and stops refreshing even after the errors are fixed. I tried clean installation on VS Code etc.. Even I tried clean installation on another PC. The problem remains. The problem is related between ESlint and the development server, and occurs when ESlint detect errors! – emil iliev Jan 23 '21 at 16:42
  • https://stackoverflow.com/a/62389000/11404554 check this and let me know if your problem solve. – mahdi ashori Jan 24 '21 at 08:00
  • 1
    Yes, when i remove ESlint from the project, the development server refresh fine, but not showing if there are any errors defined by ESlint. Anyway, thanks for the help! – emil iliev Jan 24 '21 at 10:27
0

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.

emil iliev
  • 11
  • 2