创建反应应用程序，重新加载不起作用答案

【问题标题】：Create react app, reload not working创建反应应用程序，重新加载不起作用
【发布时间】：2017-06-30 14:00:40
【问题描述】：

我刚开始使用 create-react-app 在 React 中编码。在文档中说

如果您进行编辑，页面将重新加载。

我不知道哪个模块负责自动重新加载（webpack 或 react-hot-reloader？），但它不起作用。我使用不同的编辑器（Sublime、VIM、..）编辑了文件，但似乎问题出在其他方面。有什么调试方法的建议吗？

【问题讨论】：

您是在使用npm start，还是通过从html文件打开它来加载它。可能是一个愚蠢的问题，但有时值得一问......
@BobbyW 我正在使用 npm start
npm 缓存清理 --force
我在 windows 上也有类似的问题。任何解决方案

标签： reactjs create-react-app

【解决方案1】：

经过多次搜索，我发现 Webpack watch 使用 inotify 来观察文件更改，并且在 ubuntu 中它被设置为一个较低的值。快速修复：

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

如果您想永久更改它（来自Ronald answer）：

echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf
sudo sysctl -p

【讨论】：

你在哪个目录下运行了上面的终端命令？
没关系，只要你运行它
非常感谢。它在我的 linux mint 中工作。但是每次PC重新启动时我都需要运行这个命令。有什么办法吗？
它在 ubuntu 18.04 上运行 :) 谢谢，这真的很烦人
它适用于 Linux Mint.. 是解决问题的最简单方法

【解决方案2】：

2021 年

我在 react ^17.0.2 中遇到了这个问题，我通过添加 .env 文件并设置 FAST_REFRESH=false 来修复它。只需在项目根目录下创建.env文件，并在文件中添加FAST_REFRESH=false即可。

【讨论】：

这确实有效。伙计，手动刷新真是令人沮丧。谢谢！

【解决方案3】：

对于 Ubuntu 用户，请在终端中运行：

sudo gedit /etc/sysctl.conf

滚动到底部并粘贴：

fs.inotify.max_user_watches=524288

保存并关闭编辑器，然后运行：

sudo sysctl -p

检查您的成功：

cat /proc/sys/fs/inotify/max_user_watches

这应该返回 524288

apsrcreatix

参考：https://github.com/flathub/com.visualstudio.code/issues/29#issuecomment-477126012

【讨论】：

【解决方案4】：

实际上有解决方案让快速刷新工作。

使用这个补丁https://github.com/facebook/create-react-app/pull/11105/files 来自@pmmmwh

使用https://www.npmjs.com/package/patch-package 编辑您的依赖项。

安装patch-package（通过npm或yarn到你的项目中）
- npm：npm i patch-package
- 纱：yarn add patch-package postinstall-postinstall

编辑package.json并添加postinstall脚本

"scripts": {
+  "postinstall": "patch-package"
}

编辑文件 YOUR_PROJECT/node_modules/react-dev-utils/webpackHotDevClient.js - 上面的 github 拉取请求中引入了更改
运行npx patch-package react-dev-utils
提交由该脚本创建的更改（例如./patches/react-dev-utils+11.0.4.patch）
运行您的应用，现在它会根据更改刷新

或等待react-dev-utils 的新版本（尚未发布，最新版本@11.0.3不包含此更新）。

【讨论】：

【解决方案5】：

我在 Ubuntu 中遇到了同样的问题。

问题已通过删除node_modules解决，然后运行

yarn install

【讨论】：

您的解决方案适合我。就我而言，我使用了npm i 而不是yarn install。
指的是同一个东西

【解决方案6】：

由于更新了一些包（可能是因为typescript），我在 Create React 应用程序中的热重载失败了。我必须在不弹出 CRA 的情况下解决它。

我设法通过升级到这些软件包的 16.10 版来修复它：

"react": "^16.10.0",
"react-dom": "^16.10.0"

而且效果很好！

我的代码在index.tsx:

...
const isDev = process.env.NODE_ENV === 'development'
const rootEl = document.getElementById('root')

ReactDOM.render(<App />, rootEl)

if (isDev && module.hot) {
  module.hot.accept('screens/App', () => {
    ReactDOM.render(<App />, rootEl)
  })
}

提示： 先试试这段代码（也许你设置了错误的路径）

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

如果这开始工作，那么您需要指定路径以使热加载更有效（更少冒泡 = 更短的加载）

【讨论】：

【解决方案7】：

尝试在 .env 文件中添加CHOKIDAR_USEPOLLING=true。

【讨论】：

【解决方案8】：

在 create-react-app 之后，我更改了项目的名称。这是导致重新加载不起作用的原因之一。然后我再次 create-react-app，重新加载现在可以工作了。

【讨论】：