27

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

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

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

4

8 回答 8

37

经过多次搜索，我发现 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

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

echo "FAST_REFRESH=false\n" | cat > .env
于 2017-02-18T04:31:20.953 回答
22

2021 年

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

于 2021-07-05T14:06:30.183 回答
5

对于 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

于 2020-03-17T14:29:59.687 回答
4

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

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

yarn install // or npm install
于 2020-12-24T10:17:38.833 回答
3

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

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

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

  1. 安装patch-package（通过 npm 或 yarn 安装到您的项目中）
    • npm：npm i patch-package
    • 纱：yarn add patch-package postinstall-postinstall
  2. 编辑package.json和添加postinstall脚本 
    "scripts": {
+  "postinstall": "patch-package"
}
  3. 编辑文件YOUR_PROJECT/node_modules/react-dev-utils/webpackHotDevClient.js- 上面的 github 拉取请求中引入了更改
  4. 跑npx patch-package react-dev-utils
  5. 提交此脚本创建的更改 (eq ./patches/react-dev-utils+11.0.4.patch)
  6. 运行您的应用程序，现在它将刷新更改

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

于 2021-08-17T18:54:28.137 回答
0

由于更新了一些包（可能是因为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()
}

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

于 2021-01-05T00:28:17.143 回答
0

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

于 2021-04-19T19:33:42.910 回答
-1

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

于 2021-07-27T01:47:25.177 回答