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

Posted 2023-03-04

【中文标题】create-react-app 的开发服务器不自动刷新

【英文标题】：Development server of create-react-app does not auto refresh

【发布时间】：2017-09-02 15:35:25

【问题描述】：

我正在使用 create-react-app 在 React 上关注 tutorial。 该应用由create-react-app v1.3.0创建

create-react-app my-app

开发服务器由

运行

npm start

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

【问题讨论】：

您是否通过http://localhost:3000/访问您的应用程序？

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

这是我能找到的唯一适用于 Windows 10 的解决方案 ***.com/a/52231731/74585

【参考方案1】：

我尝试了上述所有建议，但我的 react 应用程序仍然没有在代码更改时刷新。然后我复制了之前工作的 react 项目文件夹（仅前端），并将其粘贴到我正在启动的新项目中。删除了与旧项目相关的所有代码并开始使用它。这解决了我的问题。

如果这对您可行，您也可以采用相同的方法。如果有人发现新的简单解决方案，请在此处发布。

【讨论】：

对不起，我没有提到我使用的是 WSL2。而且我已经在脚本下的 package.json 中使用了带有以下行的 package.json 文件：“start”：“CHOKIDAR_USEPOLLING=true react-scripts start”，

这并不能真正回答问题。如果您有其他问题，可以点击 进行提问。要在此问题有新答案时收到通知，您可以follow this question。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。 - From Review

【参考方案2】：

我最终来到这里寻找类似问题的答案。虽然我的特定于一个不是热重新加载的页面。我确实想指出这是使用 Nextjs，它是 /pages 下名为 subscribe.js (/pages/subscribe.js) 的页面

这很令人沮丧，而且确实花了一段时间才弄清楚。

这里有很多技术答案，但有趣的是，我的问题是我的功能组件没有以大写字母开头。

import React from 'react'

export default function subscribe() 
  return (
    <div>
      
    </div>
  )

函数名需要以大写开头的地方

import React from 'react'

export default function Subscribe() 
  return (
    <div>
      
    </div>
  )

正如他们所说，您每天都会学到新东西。在这个游戏中，它更像是 10 件事，麻烦的是记住你学到的东西；）

【参考方案3】：

如果人们来这里寻找更好的解决方案，我的问题通过将我的文件移动到 WSL2 文件系统中得到解决。热重载立即生效，无需添加 .env 文件。

【参考方案4】：

注意将 .env 文件添加到的位置。当你调用create-react-app app-name 时，React 会添加以下文件夹结构：

./root
   ./app-name
      ./node_modules
      ./public
      ./src
      package.json
      README.md

我的问题是，我在 ./root 目录下添加了 .env 文件（里面有 FAST_REFRESH=false）。将文件放在我的 ./app-name 文件夹中解决了这个问题。

【参考方案5】：

只需在您应用的 root 中创建 .env 文件 并添加以下内容

.env

FAST_REFRESH=false

【参考方案6】：

我对如何创建 .env 文件感到困惑，即使我这样做了，它仍然无法正常工作。我可以通过在终端上运行此命令来解决此问题。

npm run start -FAST_REFRESH=false

希望它对某人有所帮助。

【参考方案7】：

对于 WSL2 的用户，请注意，如果您的项目在您的 Windows 系统中（即 C: 或 D:），那么它将无法工作。

解决方案 1：

通过 WSL 共享，\wsl$\DISTRO_NAME 从 Windows 访问这些文件。

解决方案 2：

在你的 package.json 中

找到

"scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  

替换成

"scripts": 
    "start": "CHOKIDAR_USEPOLLING=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  

感谢https://github.com/facebook/create-react-app/issues/10253

【讨论】：

你能解释一下第一个解决方案吗？我的项目/待办事项日历文件夹放在桌面上。我试过第二个解决方案没有用。

【参考方案8】：

如果您使用的是 Visual Studio 代码，您可以创建一个新文件并将其保存为 .env。在里面，.env 写 FAST_REFRESH=false 并保存。现在运行npm start，这对我有用。

【参考方案9】：

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

---

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

【讨论】：

你会如何在 Typescript 中做到这一点？

它正在创建.env 文件，并添加该行。我想如果我们使用 TS 而不是 JS，这应该不会改变，尝试创建该文件，它可能会起作用，否则可能会有其他特定于我们的项目的事情发生。

糟糕，你是对的。我的文件中出现了另一个错误，阻止了自动重新加载。谢谢！

【参考方案10】：

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

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

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

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

反应 17

反应脚本 4

【讨论】：

这终于可以在我的 Mac 上运行了。其他一切都没有。只有添加这个有帮助。有人知道这个的根本原因吗？

这对我有用，也适用于在 0.0.0.0 上监听的无头云

正确答案 - MacOSX React app typescript

帮我解决了这个问题（Ubuntu 20.04.2 和 Firefox 84.02）

这在 Win10 上运行良好。要在 Win10 中创建 .env 文件，请创建一个新文件并将其重命名为 .env

【参考方案11】：

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

FAST_REFRESH = false
CHOKIDAR_USEPOLLING=true

我的设置不包括任何虚拟机（除非 WSL2 被视为 VM？）。尽管如此，带有上述两个条目的 .env 还是让它运行起来了。

【参考方案12】：

在 package.json 中，使用 "react-scripts": "3.4.4"

删除 package-lock.json

运行“rm -rf node_modules && npm install”

npm 开始

【参考方案13】：

对于 linux，首先检查允许使用的文件数：

cat /proc/sys/fs/inotify/max_user_watches

在我的情况下，它是 8192，所以我将其更改为 524288，它运行良好。

用来改变的命令是：

cd /proc/sys/fs/inotify sudo nano max_user_watches

然后将 no 更改为 524288 保存它，然后使用此命令应用更改

sudo sysctl -p

来自https://blog.jetbrains.com/idea/2010/04/native-file-system-watcher-for-linux/的参考

【参考方案14】：

“依赖”： “反应”：“^17.0.1”， “反应脚本”：“4.0.1”， 如果您使用的是这些版本，则在项目的根目录中创建 .env 文件并输入 FAST_REFRESH=false 并保存它。然后是 yarn start 或 npm start。

【参考方案15】：

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

我正在使用 React 17。

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

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

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

【讨论】：

谢谢，这在 React 17.0.1 上对我有用

这适用于我在 Windows 上使用 React 17.0.1。谢谢！

这也是我的答案！非常反直觉，标记“Fast_Refresh=false”会导致它自己快速刷新

文档在这里 - create-react-app.dev/docs/advanced-configuration。 FAST_REFRESH - 必须覆盖为 false 否则浏览器不会刷新某些更改。来自文档 - “当设置为 false 时，禁用对快速刷新的实验性支持，以允许您在不重新加载页面的情况下实时调整组件？

添加.env文件后记得重启应用，否则无法立即生效。

【参考方案16】：

使用create-react-app工具链创建新项目后

确保运行

npm install，然后 npm start

【参考方案17】：

编辑：这可能不是推荐的解决方案。该解决方案适用于 Docker。

如果使用带有卷挂载的 docker，您需要在 src 文件夹中添加一个 .env 文件，其中包含命令 CHOKIDAR_USEPOLLING=true。但是，对我来说，这引发了错误

/app/src/App.js: 找不到模块'@babel/parser'

。要解决此新错误，请将 package.json 文件中的 "react-scripts": "3.4.3" 更改为 "react-scripts": "3.4.0" 有效。因此，根据您的情况，您可能需要添加 .env 文件并更改 react-scripts 版本。

注意：为了提供更多背景信息，我正在使用 docker，react 应用程序文件作为卷安装在 docker 映像中（因此在应用程序中进行的更改会直接反映在应用程序中，而无需重新构建泊坞窗图像）。上述解决方案基于社区中发布的其他解决方案，人们曾建议更改反应脚本版本。我认为这不应该是推荐的解决方案。但是，由于我正在编写一个教程系列，因此我想节省时间并专注于其他事情。

【参考方案18】：

如果您在反向代理/nginx 后面运行您的应用程序（例如，在本地启用 https），您还需要启用 websockets 以便它可以检测到刷新：

location /sockjs-node 
    proxy_pass http://dockerhost:5000/sockjs-node;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;

【参考方案19】：

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

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

【讨论】：

这对我来说是解决办法，但我实际上需要将此环境配置添加到我的docker-compose.yml，所以它最终在environment 部分下显示CHOKIDAR_USEPOLLING: 'true'

我使用的是 WLS，这对我来说是解决方法。干杯

【参考方案20】：

在Chrome上安装插件Classic Cache Killer，100%解决问题。

【参考方案21】：

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

然后你可以修改其他文件，react会在保存时刷新。

npm 似乎是在第一时间寻找 index.js 的变化，如果你重构你的文件夹结构，index.js 可能会丢失。 强制更新 index.js 文件以解决问题。

至少这对我有用

【参考方案22】：

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

【讨论】：

很好，问题是如果您只是在尝试一些东西并且您不想使用 GIT 并且只是将它放在另一个磁盘中，那么您必须不断将代码保存到 GIT拥有你所有的东西......

【参考方案23】：

代替

npm start

以管理员权限运行 在 Linux 中

sudo npm start

【讨论】：

您将sudo 与 npm 一起使用的原因是什么？

【参考方案24】：

您可能想将 -w 添加到 "start": "react-scripts start -w"。 我有同样的问题，通过添加 --watch 修复。

【参考方案25】：

试试这个命令

echo fs.inotify.max_user_watches=524288 
sudo tee -a /etc/sysctl.conf && sudo sysctl -p

如果仍然存在，那么你需要删除你的节点模块，然后再次

npm install

然后

npm start

【参考方案26】：

在我的情况下，文件观察者的数量不足。我必须手动更改配置。

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

cat /proc/sys/fs/inotify/max_user_watches

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

fs.inotify.max_user_watches = 524288

使用以下命令应用更改。

sudo sysctl -p

【讨论】：

这也是我的问题！现在解决了。感谢这个答案。

这工作了一段时间。几个小时后又停了。为什么会发生这种情况

【参考方案27】：

Linux系统可以试试

sudo npm start

【讨论】：

在 npm 中使用 sudo 的建议应包含有关这样做的安全风险的警告。

【参考方案28】：

将您提交的更改推送到分支，然后删除本地 repo 文件夹，然后再次克隆 repo 并运行npm install 或yarn install，无论您喜欢哪个。 这个解决方法解决了我的问题

【讨论】：

没有提到任何 VCS。如果我理解正确，您只建议重新安装库，还是我错了？

它对我不起作用:(

【参考方案29】：

您是否看过用户指南的“疑难解答”部分？ 它描述了a few common causes of this problem：

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

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

如果您的项目位于 Dropbox 文件夹中，请尝试将其移出。 如果观察者没有看到名为 index.js 的文件，而您通过文件夹名称引用它，则您 need to restart the watcher 由于 Webpack 错误。 一些编辑器，如 Vim 和 IntelliJ，有一个“安全写入”功能，目前会破坏观察器。您将需要禁用它。按照“Disabling swap files creation in vim” 中的说明进行操作。 如果您的项目路径包含括号，请尝试将项目移动到没有括号的路径。这是由Webpack watcher bug 引起的。 在 Linux 和 macOS 上，您可能需要tweak system settings 以允许更多观察者。 如果项目在虚拟机中运行，例如（Vagrant 配置的）VirtualBox，如果项目目录不存在.env 文件，则在其中添加CHOKIDAR_USEPOLLING=true。这可确保下次您运行 npm start 时，观察者会根据需要在 VM 内使用轮询模式。

如果这些解决方案都没有帮助，请留下评论in this thread。

我希望这会有所帮助！

【讨论】：

谢谢你，你死定了。我正在使用 Vim。设置set backupcopy=yes 解决了问题，如提供的文档链接中所述。

> 在 Linux 和 macOS 上，您可能需要调整系统设置以允许更多观察者。这就是我的问题。我已经关注blog.jetbrains.com/idea/2010/04/… 来修复它（即使我不使用 IntelliJ 也有帮助）

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

创建 .env 文件对我有用，因为我在 VM 上工作

嗨，丹，请您详细解释一下 chokidar 到底是什么？

【参考方案30】：

我在通过npm run start 启动服务器时遇到了同样的问题。当我将其更改为npm start 时，它按预期工作。