创建反应应用程序,重新加载不起作用
Create react app, reload not working
我刚开始使用 create-react-app 在 React 中编码。在文档中说
The page will reload if you make edits.
我不知道哪个模块负责自动重新加载(webpack 或 react-hot-reloader?),但它不起作用。我使用不同的编辑器(Sublime、VIM、..)编辑了文件,但似乎问题出在其他地方。有什么调试建议吗?
经过多次搜索,我发现 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
对于 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
我在 Ubuntu 遇到了同样的问题。
问题已通过删除 node_modules 和 运行
解决
yarn install // or npm install
我在 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()
}
如果这开始起作用,那么您需要指定路径以使热加载更有效(冒泡更少 = 加载时间更短)
尝试在 .env 文件中添加 CHOKIDAR_USEPOLLING=true
。
2021 年
我在 React ^17.0.2
中遇到了这个问题,我通过添加 .env
文件和设置 FAST_REFRESH=false
修复了它。
只需在你的项目根目录下创建一个.env
文件,并在文件中添加FAST_REFRESH=false
即可。
create-react-app 之后,我更改了我的项目 name.This 是导致 reload 不成功的原因之一 working.Then 我再次创建了 react-app,reload 现在可以正常工作了。
实际上有解决方案可以让快速刷新工作。
使用这个补丁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
不包含此更新)。
我希望能帮助其他人摆脱我所经历的同样的痛苦。
我正在使用 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 在 React 中编码。在文档中说
The page will reload if you make edits.
我不知道哪个模块负责自动重新加载(webpack 或 react-hot-reloader?),但它不起作用。我使用不同的编辑器(Sublime、VIM、..)编辑了文件,但似乎问题出在其他地方。有什么调试建议吗?
经过多次搜索,我发现 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
对于 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
我在 Ubuntu 遇到了同样的问题。
问题已通过删除 node_modules 和 运行
解决yarn install // or npm install
我在 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()
}
如果这开始起作用,那么您需要指定路径以使热加载更有效(冒泡更少 = 加载时间更短)
尝试在 .env 文件中添加 CHOKIDAR_USEPOLLING=true
。
2021 年
我在 React ^17.0.2
中遇到了这个问题,我通过添加 .env
文件和设置 FAST_REFRESH=false
修复了它。
只需在你的项目根目录下创建一个.env
文件,并在文件中添加FAST_REFRESH=false
即可。
create-react-app 之后,我更改了我的项目 name.This 是导致 reload 不成功的原因之一 working.Then 我再次创建了 react-app,reload 现在可以正常工作了。
实际上有解决方案可以让快速刷新工作。
使用这个补丁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
- npm:
- 编辑
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
不包含此更新)。
我希望能帮助其他人摆脱我所经历的同样的痛苦。
我正在使用 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 小时后,终于可以使用了!
祝大家好运!