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

Question

我正在使用create-react-app关注React 的教程.该应用程序由create-react-app v1.3.0 创建

create-react-app my-app

开发服务器由运行

npm start

多次更改代码后,浏览器不会更新实时/热重新加载更改.刷新浏览器没有帮助.仅停止开发服务器并重新启动它才会捕获对代码的新更改.

Answer 1

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

我正在使用React 17。

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

如果您的终端是Compiling...，然后您在浏览器上没有看到更改，您应该尝试.env在项目的根路径中添加一个文件并添加FAST_REFRESH=false.

默认情况下，热刷新已替换为快速刷新。

Answer 2

.env在项目的基本路径和 add 中添加一个文件FAST_REFRESH=false。

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

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

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

反应 17

反应脚本 4

Answer 3

您是否看过"用户指南"的"疑难解答"部分？
它描述了此问题的一些常见原因:

在npm start运行时保存文件时,浏览器应使用更新的代码进行刷新.

如果没有发生这种情况,请尝试以下解决方法之一:

• 如果您的项目位于Dropbox文件夹中,请尝试将其移出.
• 如果观察者没有看到一个被调用的文件index.js并且您按文件夹名称引用它,则需要重新启动观察程序,因为Webpack存在错误.
• 像Vim和IntelliJ这样的编辑有一个"安全写入"功能,目前打破观察者.你需要禁用它.按照"使用支持安全写入的编辑器"中的说明进行操作.
• 如果项目路径包含括号,请尝试将项目移动到没有它们的路径.这是由Webpack观察者错误引起的.
• 在Linux和macOS上,您可能需要调整系统设置以允许更多观察者.
• 如果项目在诸如(Vagrant provisioned)VirtualBox之类的虚拟机内运行,则.env在项目目录中创建一个文件(如果该文件不存在)并添加CHOKIDAR_USEPOLLING=true到该文件中.这可确保您下次运行时npm start,观察程序在VM内部根据需要使用轮询模式.

如果这些解决方案都没有帮助,请在此主题中发表评论.

我希望这有帮助!

Answer 4

在 WSL2 为我工作时，“如果项目在虚拟机中运行，例如（Vagrant 配置的）VirtualBox，.env如果它不存在，请在项目目录中创建一个文件，并添加CHOKIDAR_USEPOLLING=true到其中。这确保下次您run npm start，观察者根据需要在 VM 内使用轮询模式。”

或者只是运行： $ CHOKIDAR_USEPOLLING=true npm start

Answer 5

您是否尝试过以超级用户权限启动npm？我的专案有问题，就这样解决了。

$sudo bash
#npm  start

Answer 6

就我而言，是因为文件观察者数量不足。我必须手动更改配置。

在终端上使用以下命令查看活动文件观察者限制。

cat /proc/sys/fs/inotify/max_user_watches

将以下行添加到/etc/sysctl.conf文件中。

fs.inotify.max_user_watches = 524288

使用以下命令应用更改。

sudo sysctl -p

Answer 7

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

.env

FAST_REFRESH=false

Answer 8

在 WSL2 的 win10 上，我必须在根文件夹中创建 .env，并包含两者

FAST_REFRESH = false
CHOKIDAR_USEPOLLING=true

我的设置不包含任何虚拟机（除非 WSL2 被视为虚拟机？）。尽管如此，具有上述两个条目的 .env 已启动并运行。

Answer 9

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

Answer 10

花了几个小时解决这个问题：

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 . 如果您没有看到更改，请刷新浏览器选项卡。

Answer 11

从 React-scripts 版本 5.xx 开始，CHOKIDAR_USEPOLLING=true不再在 .env 文件中工作。您现在需要WATCHPACK_POLLING=true在项目根目录中的 .env 文件中使用。根据这个线程。

Answer 12

找到您的index.js并更改此文件中的某些内容，例如添加空格，然后保存。它应该在你的控制台中显示“正在编译...”。

然后你可以修改其他文件，反应将在保存时刷新。

看起来 npm 正在第一时间寻找 index.js 中的更改，如果您重构文件夹结构，则可能会错过 index.js。强制更新 index.js 文件即可解决问题。

至少这对我有用