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

Question

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

The page will reload if you make edits.

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

Answer 1

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

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

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

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

您可能还需要在项目的根目录中添加一个 .env 文件，其中包含这一行“FAST_REFRESH=false”，如 create react app docs.[=16= 中所述]

echo "FAST_REFRESH=false\n" | cat > .env

Answer 2

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

sudo gedit /etc/sysctl.conf

滚动到底部并粘贴：

fs.inotify.max_user_watches=524288

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

sudo sysctl -p

检查是否成功：

cat /proc/sys/fs/inotify/max_user_watches

这应该return524288

来自 apsrcreatix

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

Answer 3

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

问题已通过删除 node_modules 和运行

解决

yarn install // or npm install

Answer 4

我在 Create React 应用程序中的热重载由于更新了一些包而中断了（可能是因为 typescript）。我不得不在没有弹出 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()
}

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

Answer 5

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

Answer 6

2021 年

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

Answer 7

create-react-app 之后，我更改了我的项目 name.This 是导致 reload 不成功的原因之一 working.Then 我再次创建了 react-app，reload 现在可以正常工作了。

Answer 8

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

使用这个补丁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
提交由此脚本创建的更改 (e.q。./patches/react-dev-utils+11.0.4.patch)
运行您的应用程序，现在它会根据更改刷新

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

Answer 9

我希望能帮助其他人摆脱我所经历的同样的痛苦。

我正在使用 Windows 10 和 Ubuntu 20.04 WSL，使用 nvm 来管理 node/npm。

我必须：

在 nvm 中使用 Node v16.14.2（也使用 npm 8.5.0）
在我的 package.json 文件中将 react-scripts 从 "react-scripts": "5.0.0" 更改为 "react-scripts": "4.0.3"
将我的 package.json 启动脚本更改为

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

然后我运行 npm install 更新反应脚本并重新启动 bash 终端
我也很好地遵循了 Ronald Araújo 在他的回答中的建议。

5 小时后，终于可以使用了！

祝大家好运！

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

Create react app, reload not working

reactjs

create-react-app