从React 15渐进升级到React 17时的Node模块解析异常问题

背景 #

正在进行 React 15 到 React 17 的渐进式升级，项目采用三个 package.json 的结构：根目录一个，src/legacy 和 src/modern 目录各一个。运行 npm start（实际执行命令：webpack-dev-server --hot）后，出现一系列模块解析错误。

错误详情 #

ERROR in ./src/client/app/legacy/node_modules/radium/lib/index.js 22:24-63
Module not found: Error: Can't resolve '../ProofEdit/CampusProofCard' in 'C:\Users\wicra\OneDrive\Desktop\Code2\TgccWeb\src\client\app\legacy\node_modules\radium\lib'
 @ ./src/client/app/legacy/tgccmain.tsx 33:15-32

ERROR in ./src/client/app/legacy/node_modules/react-bootstrap/es/index.js 22:24-63
Module not found: Error: Can't resolve '../ProofEdit/CampusProofCard' in 'C:\Users\wicra\OneDrive\Desktop\Code2\TgccWeb\src\client\app\legacy\node_modules\react-bootstrap\es'
 @ ./src/client/app/legacy/RealCampus/RealCampusDesignListView.tsx 33:24-50
 @ ./src/client/app/legacy/tgccmain.tsx 114:33-81

ERROR in ./src/client/app/legacy/node_modules/react-dom/index.js 22:24-63
Module not found: Error: Can't resolve '../ProofEdit/CampusProofCard' in 'C:\Users\wicra\OneDrive\Desktop\Code2\TgccWeb\src\client\app\legacy\node_modules\react-dom'
 @ ./src/client/app/legacy/tgccmain.tsx 20:15-35

ERROR in ./src/client/app/legacy/node_modules/react-redux/lib/index.js 22:24-63
Module not found: Error: Can't resolve '../ProofEdit/CampusProofCard' in 'C:\Users\wicra\OneDrive\Desktop\Code2\TgccWeb\src\client\app\legacy\node_modules\react-redux\lib'
 @ ./src/client/app/legacy/tgccmain.tsx 24:20-42 25:20-42

ERROR in ./src/client/app/legacy/node_modules/react-router/es/index.js 22:24-63
Module not found: Error: Can't resolve '../ProofEdit/CampusProofCard' in 'C:\Users\wicra\OneDrive\Desktop\Code2\TgccWeb\src\client\app\legacy\node_modules\react-router\es'
 @ ./src/client/app/legacy/tgccmain.tsx 22:21-44 26:21-44

ERROR in ./src/client/app/legacy/node_modules/react/react.js 22:24-63
Module not found: Error: Can't resolve '../ProofEdit/CampusProofCard' in 'C:\Users\wicra\OneDrive\Desktop\Code2\TgccWeb\src\client\app\legacy\node_modules\react'
 @ ./src/client/app/legacy/tgccmain.tsx 19:12-28

ERROR in ./src/client/app/modern/node_modules/@emotion/react/dist/emotion-react.browser.esm.js 22:24-63
Module not found: Error: Can't resolve '../ProofEdit/CampusProofCard' in 'C:\Users\wicra\OneDrive\Desktop\Code2\TgccWeb\src\client\app\modern\node_modules\@emotion\react\dist'
 @ ./src/client/app/modern/HomePage/SplashPage.tsx 20:14-39
 @ ./src/client/app/legacy/tgccmain.tsx 70:19-59

ERROR in ./src/client/app/modern/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js 22:24-63
Module not found: Error: Can't resolve '../ProofEdit/CampusProofCard' in 'C:\Users\wicra\OneDrive\Desktop\Code2\TgccWeb\src\client\app\modern\node_modules\@emotion\react\jsx-runtime\dist'
 @ ./src/client/app/modern/HomePage/SplashPage.tsx 18:20-57
 @ ./src/client/app/legacy/tgccmain.tsx 70:19-59

ERROR in ./src/client/app/modern/node_modules/react-redux/es/index.js 22:24-63
Module not found: Error: Can't resolve '../ProofEdit/CampusProofCard' in 'C:\Users\wicra\OneDrive\Desktop\Code2\TgccWeb\src\client\app\modern\node_modules\react-redux\es'
 @ ./src/client/app/modern/node_modules/react/index.js 21:20-42
 @ ./src/client/app/modern/HomePage/SplashPage.tsx 21:12-28
 @ ./src/client/app/legacy/tgccmain.tsx 70:19-59

ERROR in ./src/client/app/modern/node_modules/react-router-dom/esm/react-router-dom.js 22:24-63
Module not found: Error: Can't resolve '../ProofEdit/CampusProofCard' in 'C:\Users\wicra\OneDrive\Desktop\Code2\TgccWeb\src\client\app\modern\node_modules\react-router-dom\esm'
 @ ./src/client/app/modern/HomePage/SplashPage.tsx 23:25-52
 @ ./src/client/app/legacy/tgccmain.tsx 70:19-59

ERROR in ./src/client/app/modern/node_modules/react/index.js 22:24-63
Module not found: Error: Can't resolve '../ProofEdit/CampusProofCard' in 'C:\Users\wicra\OneDrive\Desktop\Code2\TgccWeb\src\client\app\modern\node_modules\react'
 @ ./src/client/app/modern/HomePage/SplashPage.tsx 21:12-28
 @ ./src/client/app/legacy/tgccmain.tsx 70:19-59

已尝试的操作与当前困境 #

• 未添加 modern 文件夹时，将报错依赖添加到根目录 package.json 解决了构建问题，但这不符合渐进式升级的设计逻辑——理论上应该读取对应目录（legacy/modern）下的 package.json
• 尝试对 React 17 相关依赖（如 Emotion 11）使用同样方法时，出现 React 版本不匹配错误，因为根目录不应存在 React 包，仅 legacy 和 modern 目录各自维护对应版本的 React
• 已确认被引用的 ../ProofEdit/CampusProofCard 文件确实存在，但奇怪的是多个第三方模块都在错误地尝试引用该文件
• Webpack 和 TypeScript 配置中使用了别名，且大部分 npm 依赖是手动添加到 package.json，而非通过 npm install 命令安装

目前无法推进升级，希望得到排查方向或解决方案，可提供更多配置细节。

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