create-react-app 的开发服务器不会自动刷新

Question

我正在使用create-react-app跟随一个React的教程。应用程序由create-react-appv1.3.0创建。

create-react-app my-app

开发服务器由运行

npm start

经过多次修改代码后，浏览器未能实时更新/热加载更改。刷新浏览器也没有帮助。只有停止开发服务器并重新启动才能捕获代码的新更改。

- elpddev

---

你是通过 http://localhost:3000/ 访问你的应用程序吗？ - Joe Clay

@JoeClay 是的。浏览器启动并显示页面。但是页面本身不会随着对代码的新编辑而改变。 - elpddev

这是我能找到的唯一在Windows 10上运行的解决方案。https://dev59.com/8nI-5IYBdhLWcg3wMFW0#52231731 - Matthew Lock

Answer 1

我读了很多不必要的东西。

我正在使用 React 17。

我的问题是页面只添加新组件但浏览器没有刷新页面。

如果你的终端显示 Compiling...，然后在浏览器上看不到变化，你应该尝试在项目的根路径中添加一个 .env 文件，并添加 FAST_REFRESH=false。

默认情况下，热更新被快速更新所取代。

- Kev Aldasoro

---

这对我来说也是答案！非常反直觉，标记“Fast_Refresh=false”会导致它自动快速刷新。 - Robert Christ

谢谢！它也适用于React 17.0.2。 - NicoE

文档在这里 - https://create-react-app.dev/docs/advanced-configuration/。 FAST_REFRESH - 必须被重写为 false，否则浏览器不会刷新某些更改。根据文档，“当设置为false时，禁用对快速刷新的实验性支持，以便您可以即时调整组件而无需重新加载页面。” - vkt

请记得在添加.env文件后重新启动应用程序，否则它将无法立即生效。 - ikhvjs

非常完美，这让我在 MacOS 上 React 17.0.2 上解决了问题。 - Simon Rose

Answer 2

您是否看过用户指南中的“故障排除”部分？
它描述了这个问题的几个常见原因：（链接）：

当您在运行npm start时保存文件时，浏览器应该会使用更新后的代码刷新。

如果没有刷新，请尝试以下解决方法之一：

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

如果这些解决方案都没有帮助，请在此线程中留下评论。希望这可以帮到你！

- Dan Abramov

---

谢谢，你说得很准确。我正在使用Vim。根据提供的文档链接，设置set backupcopy=yes解决了这个问题。 - elpddev

在Linux和macOS上，您可能需要调整系统设置以允许更多的观察者。在我的情况下，这正是问题所在。我按照https://blog.jetbrains.com/idea/2010/04/native-file-system-watcher-for-linux/进行了修复（即使我没有使用IntelliJ，它也有帮助）。 - SathOkh

我正在使用VirtualBox，这个解决方案是“在您的项目目录中创建.env文件（如果不存在），并向其中添加CHOKIDAR_USEPOLLING=true”，对我很有效。非常感谢。 - gautam

由于我正在使用虚拟机，因此创建.env文件对我有用。 - aqteifan

嗨丹，你能否解释一下Chokidar是什么？ - Mostafa Ghadimi

Answer 3

在项目的基础路径中添加.env文件，并在其中添加FAST_REFRESH=false。

这将禁用快速刷新并返回热重载。

如果您不想将.env文件添加到基本路径，可以选择以下选项：

• "start": "FAST_REFRESH=false react-scripts start"，在package.json文件中。
• FAST_REFRESH=false npm run start，在命令行中执行。
• 将FAST_REFRESH=false导出为环境变量。

React 17

React-scripts 4

- Luis Acero

---

这终于在我的 Mac 上运行了。其他所有的都没用。只有添加这个才有帮助。有人知道这背后的根本原因吗？ - Hrabosch

这对我有用，也适用于在0.0.0.0上侦听的无头云。 - dman

对我来说起作用了（Ubuntu 20.04.2和Firefox 84.02） - TastyWheat

@Hrabosch 这是由于 React 17 的新版本。它改变了热重载以实现快速刷新，但仍有一些需要完善的地方。 - Luis Acero

当我使用第一个选项运行npm start时，出现错误：“FAST_REFRESH”未被识别为内部或外部命令、可操作的程序或批处理文件。 - bilalmohib

Answer 4

你尝试过以超级用户权限运行 npm start 吗？我的项目也遇到了这个问题，我是这样解决的。

$sudo bash
#npm  start

- JiN

---

谢谢你的回答。这个方法没有起作用，无论是在sudo下还是root用户下。 - elpddev

非常感谢您的努力。经过数小时的调试，它解决了我的问题。 - Meet Zaveri

如果npm start需要超级用户权限，那么有很大的问题（或者你试图绑定到特权端口）。在以超级用户身份运行之前，请确保弄清楚为什么需要这样做。 - Scott Severance

Answer 5

在WSL2中，如果您的项目运行在虚拟机中（例如基于Vagrant的VirtualBox），请在您的项目目录下创建一个.env文件（如果不存在），并添加CHOKIDAR_USEPOLLING=true。这可以确保下一次运行npm start时，观察器使用轮询模式，在虚拟机内部必要时使用。

或者直接运行：$ CHOKIDAR_USEPOLLING=true npm start

- Estiventh Leonardo Neira Aldan

---

这对我来说是解决方法，但实际上我需要将此 env 配置添加到我的 docker-compose.yml 中，因此最终在 environment 部分下方会显示 CHOKIDAR_USEPOLLING: 'true'。 - TheHiggsBroson

我之前在使用WLS，这个方法对我很有帮助。谢谢。 - zekromWex

尝试了所有其他方法（在WSL2上），使用“$ CHOKIDAR_USEPOLLING=true npm start”最终起作用了。谢谢。 - Wesley Cheek

Answer 6

花了几个小时来修复这个问题：

---

1. 创建一个文件 .env（与 package.json 文件旁边），添加以下内容：

文件：.env

FAST_REFRESH=false

2. 现在，停止并启动服务器

(Ctrl + C to start, if in CMD, on Windows OS)
npm start

4. 现在，在 App.js 文件中更改一些文本。

文件：App.js

from "Learn React"
to "Learn React And it's working"

注意：
1. 服务器重启很重要。
2. 如果您没有看到更改，请刷新浏览器标签页。

- Manohar Reddy Poreddy

---

你会如何在Typescript中实现这个？ - theProCoder

它正在创建 .env 文件，并添加那一行。我猜如果我们使用 TS 而不是 JS，那应该不会改变，尝试创建那个文件，它可能会起作用，否则可能有其他与我们项目特定相关的问题。 - Manohar Reddy Poreddy

哎呀，是的，你说得对。我的文件里还有一个错误，这个错误导致了自动重新加载的失败。谢谢！ - theProCoder

Answer 7

在我的情况下，文件监视器的数量不足。我必须手动更改配置。

使用以下命令在终端上查看活动文件监视器限制。

cat /proc/sys/fs/inotify/max_user_watches

请在 /etc/sysctl.conf 文件中添加以下行。

fs.inotify.max_user_watches = 524288

使用下面的命令应用更改。

sudo sysctl -p

- Sudarshana Dayananda

---

这也是我的问题！现在已经解决了。感谢这个答案。 - Karthick Meenakshi Sundaram

这个之前运行了一段时间，但几个小时后又停止了。为什么会发生这种情况呢？ - Imnotapotato

Answer 8

只需在应用程序的根目录中创建.env文件，并将以下内容添加到其中。

.env

FAST_REFRESH=false

- Youssef Zidan

Answer 9

我在WSL中运行npm时遇到了这个问题。项目文件夹在我的Windows桌面文件夹中，因此在WSL中npm无法进行自动重新编译。
将项目文件夹移动到WSL用户home目录后，问题得以解决。

- Subangkar KrS

---

不错，问题在于如果你只是尝试一些东西，并且不想使用GIT，而是将其保存在另一个磁盘中，其中有你所有的东西，那么你必须不断地将代码保存到GIT。 - matiaslauriti

Answer 10

在WSL2中的win10上，我必须在根文件夹中创建.env文件，并包含以下两个内容。

FAST_REFRESH = false
CHOKIDAR_USEPOLLING=true

我的设置中没有包含任何虚拟机（除非WSL2被认为是虚拟机？）。尽管如此，具有上述两个条目的.env使其正常运行。

- POBrien