今天用官方yarn create react-app antd-demo创建新项目的时候出现ReactRefreshEntry.js报错,导致页面一直打不开,错误如下
react-refresh-runtime.development.js:465 Uncaught TypeError: Cannot read property 'forEach' of undefined
at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:465)
at Object../node_modules/react-scripts/node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js (ReactRefreshEntry.js:8)
at __webpack_require__ (bootstrap:856)
at fn (bootstrap:150)
at Object.1 (reportWebVitals.js:14)
at __webpack_require__ (bootstrap:856)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
injectIntoGlobalHook @ react-refresh-runtime.development.js:465
./node_modules/react-scripts/node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js @ ReactRefreshEntry.js:8
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ reportWebVitals.js:14
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
项目的package.json如下
{
"name": "antd-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"antd": "^4.8.4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"react-refresh": "^0.9.0"
}
}
解决办法:
原因是浏览器安装了React Developer Tools
3.6.0 插件,我把它禁用掉以后页面能正常打开。
可能原因是
ReactRefreshEntry.js与reactdevelopertools不兼容,具体仍待排查,或者有知道具体原因的朋友欢迎在评论区留言解答,万分感谢O(∩_∩)O哈哈~