create-react-app 的开发服务器遇到 ESLINT 检测到的错误时停止自动刷新

Question

我在 VS Code 中启动 React.js 项目

npm启动

create-react-app 的开发服务器在遇到 ESlint 错误时停止。 当错误得到修复时，它永远不会自动刷新页面。 需要通过按刷新按钮或 F5 手动刷新浏览器页面。

例如：如果我删除了一些右括号（默认情况下是错误的，不是由 ESlint 配置的），开发服务器会停止，但是当我放回括号时，服务器会自动刷新页面。 但是当错误由 ESlint 定义时（例如“no-trailing-spaces”），开发服务器停止并且在修复错误之后它永远不会刷新页面..

以下是图片中的结果：
服务器在遇到 ESlint 错误时停止

修复错误后，服务器仍然显示错误并且永远不会自动刷新

ps 实际上服务器只在第一个固定错误上刷新一次，在每个以下固定错误上，服务器永远不会刷新！

有什么办法可以解决这个问题吗？

非常感谢！

Answer 1

---

如果这没有发生，请尝试以下解决方法之一：

• 如果您的项目位于 Dropbox 文件夹中，请尝试将其移出。
• 如果观察者没有看到名为 index.js 的文件并且您通过文件夹名称引用它，则由于 Webpack 错误，您需要重新启动观察者。
• Vim 和 IntelliJ 等编辑器有一个“安全写入”功能，目前会破坏观察者。 您将需要禁用它。 按照“ 在 vim 中禁用交换文件创建”中的说明进行操作。
• 如果您的项目路径包含括号，请尝试将项目移动到没有括号的路径。 这是由Webpack 观察程序错误引起的。
• 在 Linux 和 macOS 上，您可能需要调整系统设置以允许更多观察者。
• 如果项目在虚拟机中运行，例如（已配置的 Vagrant）VirtualBox，请在项目目录中创建一个 .env 文件（如果它不存在），并将 CHOKIDAR_USEPOLLING=true 添加到其中。 这可确保下次您运行 npm start 时，观察者会根据需要在 VM 内使用轮询模式。

Answer 2

原来问题与 ESlint 无关，而与 react-scripts 版本有关。

可悲的是，我花了几天时间才弄清楚问题出在哪里。

首先我认为这个问题与 ESlint 有关，但我错了。

即使项目中没有 ESlint，开发服务器也不会刷新。

经过我的研究，我发现问题来自 react-script 版本 4.0.0 和 4.0.1。

目前唯一的解决方法（当 react-script 4.0.1 可用但不工作时）是降级到 react-script 3.4.4。

为此，我使用以下步骤：

在项目文件夹中：

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

在这些步骤之后，开发服务器再次像魅力一样刷新:)

我想指出，上述步骤必须适用于使用 react-scripts 4.0.0 或 4.0.1 并且在开发服务器上出现刷新问题的人。