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

Question

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

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

我不知道哪个模块负责自动重新加载（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 中所述。

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

Answer 2

2021 年

我在反应中遇到了这个问题

^17.0.2

我通过添加

.env

文件并设置

FAST_REFRESH=false

修复了它。只需在项目根目录下创建一个

.env

文件并在文件中添加

FAST_REFRESH=false

即可。

Answer 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

Answer 4

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

通过删除node_modules然后运行

解决了问题

yarn install // or npm install

Answer 5

我希望能拯救其他和我经历过同样痛苦的人。

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

我必须：

在nvm中使用Node v16.14.2（也使用npm 8.5.0）
在我的 package.json 文件中将反应脚本从
```
"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
```
来更新 React 脚本并重新启动 bash 终端
我还遵循了罗纳德·阿劳霍（Ronald Araújo）在回答中的建议。

5个小时后，终于成功了！

祝大家好运！

Answer 6

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

使用此补丁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 Pull 请求中引入了更改

奔跑
```
npx patch-package react-dev-utils
```
提交此脚本创建的更改（例如
```
./patches/react-dev-utils+11.0.4.patch
```
）
运行您的应用程序，现在它将根据更改进行刷新

或者等待新版本的

react-dev-utils

（尚未发布，上一个版本

@11.0.3

不包含此更新）。

Answer 7

我在 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 8

尝试在 .env 文件中添加

CHOKIDAR_USEPOLLING=true

。

Answer 9

如果保存更改后 React 网页未重新加载，请尝试将此行添加到

App.js 文件中：

import React from 'react';

Answer 10

我通过在 Windows Subsystem for Linux (WSL) 文件夹中创建 React 应用程序解决了这个问题，而不是在任何 Windows 目录中创建它。

Answer 11

我查看了控制台并发现了一个错误：

预期要安装的应用程序路由器不变

使用

此解决方案修复它后，热重载再次开始工作。

Answer 12

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

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

问题描述投票：0回答：12

12个回答

最新问题

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

问题描述 投票：0回答：12

12个回答

最新问题

问题描述投票：0回答：12