React 18渲染报错Uncaught TypeError: Cannot read '_updatedFibers'求助

问题代码 #

import * as React from "react"
import * as ReactDOM from "react-dom"
import * as ReactDOMClient from 'react-dom/client'
import App from './App'
import { createBrowserHistory } from 'history'

const history = createBrowserHistory()
const root = document.getElementById("root_dashboard_app")
if (root) {
    const root_dashboard = ReactDOMClient.createRoot(root)
    root_dashboard.render(<App history={history}/>) // <- 报错位置
}

报错信息 #

Chrome下：

Uncaught TypeError: Cannot read properties of undefined (reading '_updatedFibers')
at requestUpdateLane (react-dom.development.js:25411:23)
at updateContainer (react-dom.development.js:28810:14)
at ReactDOMHydrationRoot.render.ReactDOMRoot.render (react-dom.development.js:29309:3)
at eval (index.js:50:18)
at ./src/index.js (bundle_frontend_codes.js:2582:1)
...

Firefox下：

Uncaught TypeError: transition is undefined

项目依赖 #

"dependencies": {
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@jridgewell/sourcemap-codec": "^1.4.14",
    "@mui/material": "^5.11.4",
    "@rollup/plugin-terser": "^0.3.0",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.7.3",
    "history": "^5.3.0",
    "html-webpack-plugin": "^5.5.0",
    "interpret": "^3.1.1",
    "mini-css-extract-plugin": "^2.7.2",
    "mui": "^0.0.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.0",
    "react-cookies": "^0.1.1",
    "reactstrap": "^9.1.5",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "whatwg-fetch": "^3.6.2",
    "workbox-webpack-plugin": "^6.5.4"
},
"devDependencies": {
    "webpack-cli": "^5.0.1"
}

已尝试操作 #

• 参考过相关GitHub问题帖，解决方案无效
• 确认React/ReactDOM版本匹配（均为18.2.0）

排查建议 #

• 清理冗余导入：React 18中不需要导入react-dom，仅保留react-dom/client即可，冗余导入可能导致模块冲突
• 移除废弃依赖：mui包版本为0.0.1，是已废弃的旧包，和@mui/material冲突，直接删除该依赖
• 清理缓存并重装依赖：删除node_modules、package-lock.json，执行npm install重新安装，避免缓存导致的版本异常
• 检查多React实例：执行npm ls react查看是否存在重复版本的React，若有则删除重复依赖，避免多实例冲突
• 验证App组件兼容性：临时将App替换为简单组件（如<div>Test</div>），排查是否是App组件内部使用了React 18不兼容的API或第三方库
• 检查Webpack配置：确保Webpack的resolve配置无异常，未错误解析React模块，也未开启导致React运行时异常的优化选项

内容的提问来源于stack exchange，提问作者mm_