React创建应用程序的热重载在Linux上并不总是起作用。

Question

我使用create-react-app的样板创建了一个React应用程序，这个样板似乎非常受欢迎，有时当文件更改时热重载会更新，有时不会，看起来好像有一个最短时间间隔或类似的东西。我正在使用Ubuntu操作系统，node版本为7.0，在package.json中的脚本是npm:'react-script start' 我错过了什么？

- challenger

---

你是使用任何集成开发环境（IDE）还是直接从控制台启动它？ - Adolfo Onrubia

@AdolfoOnrubia 命令行中，我使用了 react-script start。 - challenger

我的意思是你如何编辑和管理项目文件，也许有一个拼写错误导致React无法更新。修复代码错误，就会重新加载。 - Adolfo Onrubia

我不这么认为...有时它可以正常工作...然后停止...然后又可以工作...没有规律... - challenger

Answer 1

当npm start无法检测到更改时，以下是create-react-app文档提供的常见故障排除步骤 - link。

在使用npm start运行应用程序并更新编辑器中的代码应该可以刷新浏览器以显示更新的代码。 如果没有发生这种情况，请尝试以下解决方法之一：

1. 如果项目文件直接从像Dropbox或Google Drive这样的云存储同步到您的本地系统，并且您正在尝试直接在其中运行应用程序，请尝试将其移出。
2. 由于Webpack存在错误，您可能需要重新启动watcher。如果watcher未检测到index.js并且您正在通过文件夹名称引用它。
3. 编辑器（如Vim和IntelliJ）中的安全写入功能当前会破坏watcher。您需要禁用此功能。
4. 由于Webpack watcher bug，路径包含括号的项目会导致问题，请尝试将项目移动到不含括号的路径中。
5. 为了在Linux和macOS中允许更多的watchers，您可能需要调整系统设置。
6. 如果项目在虚拟机中运行，例如（由Vagrant提供的）VirtualBox，请在项目目录中创建一个.env文件（如果不存在），并添加CHOKIDAR_USEPOLLING=true。这确保下次运行npm start时，watcher使用必要的轮询模式，在VM内部必要时使用。
7. 可以尝试增加max_users_watches- 链接

更多参考资料:

• 问题跟踪器1
• 解决webpack问题
• 问题跟踪器2 - Webpack轮询

- Keshan Nageswaran

---

增加max_users_watches在没有原因的情况下突然停止热重载时非常有效。 - Adrian

对我来说，这个解决方案是有效的，适用于虚拟机（我的使用情况），谢谢！ - Shai Rippel

啊，选项6也是我的问题。 - Nemo

我正在使用Windows子系统Linux（WSL 2），并且6对我有效。 - JoelBonetR

Answer 2

尝试以下方法：

• 在您的IDE中关闭安全写入
• 增加max_user_watches
• 您的路径不应该包含括号

如果万不得已，请将此用作您的环境变量： CHOKIDAR_USEPOLLING=true npm start

来源： https://github.com/facebookincubator/create-react-app/issues/659 https://github.com/facebookincubator/create-react-app/issues/1049#issuecomment-261731734

- Lukáš Gibo Vaic

---

你甚至无法想象我花了多少个小时来修复热重载…只有你的答案帮了我很多，非常感谢！你是我的救星) - kuka

所有其他解决方法都没有成功，但你的最后一招奏效了。我的环境是Ubuntu、VS Code和CRA。 - René Steetskamp

最后一个CHOKIDAR_USEPOLLING环境变量对我很有帮助，但它会严重减慢我的虚拟机。你有什么线索吗？ - jmcollin92

CHOKIDAR_USEPOLLING=true可以为您解决问题，考虑使用另一个环境变量CHOKIDAR_INTERVAL=2000。这将限制CHOKIDAR轮询方法使用的CPU数量。 - jmcollin92

Answer 3

运行此命令

sudo -i
echo 1048576 > /proc/sys/fs/inotify/max_user_watches
exit

- brian bentancourt

Answer 4

我能够使用以下方法使其工作起来：

sudo npm start

- probhonjon

---

对我来说没有用，但是 CHOKIDAR_USEPOLLING=true npm start 有效。WSL Ubuntu 20。 - chia yongkang

除非确实需要超级用户权限，否则不要以sudo命令运行。 - Mostafa Ahangarha

Answer 5

尝试删除 node_modules 文件夹并使用 cmd 重新安装，命令为 npm install。这对我有用（Ubuntu 18.04.3 LTS）。

- yasir jafar

---

当我从Hyper Terminal切换到Ubuntu中的Kitty时，这对我起作用了。 - alextrastero

Answer 6

在Ubuntu中，我基本上会杀掉所有运行在端口上的进程（对于React应用程序，默认为:3000）。

列出所有运行在3000端口上的进程。 lsof -i :3000

这个命令将显示类似于以下内容。

COMMAND   PID USER   FD   TYPE  DEVICE SIZE/OFF NODE NAME
node     7429 yipl   19u  IPv4 1081760      0t0  TCP localhost:3000->localhost:35762 (ESTABLISHED)
chrome  26448 yipl  177u  IPv4 1080082      0t0  TCP localhost:35762->localhost:3000 (ESTABLISHED)

现在通过进程ID结束该进程。

kill -9 7429
kill -9 26488

重新启动你的React应用程序。

- Bimal Grg

Answer 7

如果你的应用程序出现了许多错误，它似乎会停止监视你的文件，因此无法检测到你修复损坏文件的情况。似乎你需要在启动时出现不太多/严重的错误，才能使文件观察器正常工作。

- mufasa

Answer 8

sudo npm start

我对Linux不是很了解，但这可能是由于防火墙设置，因为我在Windows上做过同样的事情，在那里启动React开发服务器需要通过防火墙授予权限，所以在这里做同样的事情，我们需要给它管理员权限（在Ubuntu Linux发行版中使用sudo）。

- Anurag Kush

Answer 9

我最近遇到的一个额外情况是，当使用NVM并行使用多个版本的nodejs时。基本上，我有两个终端窗口，一个运行node 10.x，另一个运行node 9.x，但Webpack监视器停止检测更改。

解决方案是将它们都切换到相同的node版本。

- Trung Tín Trần

Answer 10

简单的解决方案，

希望这能帮到您.. https://dev59.com/vVEG5IYBdhLWcg3weOy7#76309632

需要添加 react-error-overlay v6.0.9

并在 package.json 的 dependencies 下面添加以下内容 "resolutions": { "react-error-overlay": "6.0.9" },

- mainak