MERN栈应用启动报错Invalid hook call，疑React与React DOM版本不匹配

问题背景 #

• 我是JavaScript新手，正在排查MERN栈Web应用的运行时故障
• 构建流水线使用npm ci命令安装发布依赖，此前更新过Node版本但未修改依赖包
• 添加react-markdown包后，流水线崩溃无法构建，本地也无法启动应用

启动时的错误信息 #

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

排查情况 #

• 怀疑是错误提示中的原因1：React与React DOM版本不匹配。发现有依赖包的peerDependency要求React 18.0，但我的React版本是"react": "17.0.2"，降级该包后问题看似解决，React DOM版本与React保持一致
• 执行npm ls react react-dom命令，输出显示两者版本均为17.0.2，符合预期
• 项目根目录下有单独的frontend文件夹及对应package.json，前端需要单独构建

相关依赖文件 #

正常状态下的依赖文件 #

• Good-old-backend-package.json
• Good-old-backend-package-lock.json
• Good-old-frontend-package.json
• Good-old-frontend-package-lock.json

异常状态下的依赖文件 #

• Bad-new-backend-package.json
• Bad-new-backend-package-lock.json
• Bad-new-frontend-package.json
• Bad-new-frontend-package-lock.json

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