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 並且在開發服務器上出現刷新問題的人。