熱重載在我的 React 應用程序中不起作用

Question

我用 npx create-react-app 創建了這個應用程序。 在此之后，我刪除了 src 文件夾中除 index.js 之外的所有文件。 然后熱重載不起作用。 我必須轉到 chrome 並手動刷新頁面以查看更改。 這是我的index.js文件。

import React from 'react';
import ReactDom from 'react-dom';

function Greeting() {
  return (
    <div>
      <h1>hello World</h1>
      <ul>
        <li>Click Here</li>
      </ul>
    </div>
  );
}

ReactDom.render(<Greeting />, document.getElementById('root'));

Package.json文件

{
  "name": "tutorial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

有一個問題 - https://github.com/facebook/create-react-app/issues/9904

一種解決方法是在 index.js 中添加以下代碼以啟用重新加載

if (module.hot) {
  module.hot.accept();
}

進行此更改后，您必須重新啟動服務器

Answer 2

這可能是由於您的文件系統、文件擴展名或 Create-React-App 默認 webpack/project 配置。 您不必更改所有這些，因為熱重載應該是開箱即用的，如果項目剛剛開始，更是如此。

例如，我曾經在安裝 Typescript (^17.0.1) 時遇到問題，其中某些帶有 extension.ts 的文件不會觸發熱重載。 我不得不更改為.tsx並添加一個 React 導入。 .js和 .jsx 文件也可能發生同樣的情況。

如果您的文件系統（Unix、Mac）出現問題，您可以在此處嘗試 React 配置（FAST_REFRESH=false） ...或更改文件夾名稱，但我對此並沒有太多了解。

Answer 3

為了解決熱重載/快速刷新中的問題，我只需在package.json中添加CHOKIDAR_USEPOLLING=true ：

"scripts": {
        "start": "CHOKIDAR_USEPOLLING=true react-scripts start", //add this line
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
}

Answer 4

雖然上述解決方案也是有益的，但對大多數人來說有效的另一種方法是在您的項目中創建一個.env文件夾。

並在那里使用以下屬性。

FAST_REFRESH = false

添加上述內容后，您必須重新啟動服務器

Answer 5

package.json 文件中的 react-scripts 版本 4.0.1 存在問題。 我已經用 'react-scripts': '3.4.4' 替換了它，現在它可以工作了。 欲了解更多信息： https://github.com/facebook/create-react-app/issues/9984

Answer 6

將您的文件index.js更改為index.jsx 。 它對我有用。

Answer 7

如果您的頁面沒有自動加載，那么您必須執行以下步驟：

1. 添加.env文件
2. 在.env文件中添加SKIP_PREFLIGHT_CHECK=true

Answer 8

某些瀏覽器存在熱重載問題，反應版本 17。

以下是解決此問題的最簡單方法：

• Go 到package.json並將 react、 react-dom和react-scripts依賴項替換為以下內容：

   "react": "^16.13.1" "react-dom": "^16.13.1" "react-scripts": "3.4.3"

• 刪除node_modules文件夾。

• 運行npm install （它將再次安裝所有依賴項）

• 使用npm start您的 CRA 項目

這將解決熱重載問題。

Answer 9

萬一您嘗試了所有方法都沒有解決方案，請確保您正在使用計算機的驅動器而不是將項目保存在外部驅動器上。 這是我的問題，我只是將項目移動到我的計算機驅動器上，它運行良好。 快樂的編碼家伙！

Answer 10

我嘗試了這些評論中建議的所有解決方案，但對我沒有任何幫助。 我正在關注使用react-router-dom@5.1的教程。 沒有任何效果，包括.env建議、 react-scripts建議或CHOKIDAR_USEPOLLING建議。 我什至在 npm 和 yarn 之間切換，看看是不是其中一個導致了問題。

唯一對我有用的是使用yarn add react-router-dom作為最新版本，沒有附加任何特定版本，而不是使用版本 6 quick start 中列出的新Routes組件的Switch 。 現在它適用於零問題。

Answer 11

我嘗試了上面的所有建議，但沒有奏效。
最后我發現原因是因為違反了一些 eslint 規則，導致應用程序Failed to Compile 。

在我修復eslintrc.json中的規則后，它可以工作

Answer 12

一旦我在wsl 22.02上運行開發服務器，上述任何內容都沒有幫助我。 但是當我用git bash開始它時，它起作用了。

Answer 13

當 chrome 下載更新但沒有安裝它時，我遇到了熱重載問題。 安裝更新后，所有問題都消失了

Answer 14

我在使用wsl2和Ubuntu-22.04時遇到了同樣的問題，我通過將我的項目從我安裝的 Windows 驅動器 ( /mnt/c ) 移動到/home目錄到我的 wsl 發行版中來解決它。 完成后，它可以完美且更快地運行！

要使用 Windows 文件資源管理器執行此操作，您可以在\\wsl$路徑下找到您的發行版文件。 所以基本上對我來說它在\\wsl$\Ubuntu-22.04\home下。

我通過這個線程找到了這個解決方案https://github.com/facebook/create-react-app/issues/10253#issuecomment-940654613

Answer 15

我遇到了同樣的問題，我在 my.env 文件中實現了代碼

到達 your.env 文件並通過這一行

FAST_REFRESH = 假

當您保存文件代碼時，它應該可以熱重新加載您的應用程序。

謝謝：問候：rashid latif