升级React依赖后执行npm run build遇模块导入错误求助

问题根源 #

你遇到的错误是因为babel配置冲突导致@babel/runtime的导入路径被错误解析为相对路径，而react-dev-utils@12集成的Webpack配置（ModuleScopePlugin）默认禁止从src目录外发起相对导入。具体诱因有两个：

• .babelrc同时配置了@babel/preset-env、@babel/preset-react和react-app preset，而react-app preset已经内置了前两者的优化配置，重复配置打乱了babel对runtime模块的导入逻辑。
• @babel/runtime@7.9.0版本过低，与适配babel 7.16+的react-dev-utils@12不兼容，引发模块解析异常。

解决方案 #

1. 简化.babelrc配置 #

删除冗余的preset，只保留react-app preset（它会自动处理env、react编译需求及runtime导入路径），调整后的配置如下：

{
  "presets": ["react-app"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-property-in-object",
    "@babel/plugin-proposal-private-methods"
  ]
}

如果你的项目基于Create React App创建，甚至可以直接删除.babelrc，使用react-app内置的babel配置即可。

2. 升级@babel/runtime到兼容版本 #

执行命令升级到与react-dev-utils@12匹配的版本：

npm install @babel/runtime@^7.18.0 --save

也可以直接安装与当前react-app依赖的babel版本一致的runtime包，确保版本完全兼容。

3. 清理缓存并重新构建 #

清理npm缓存和webpack构建缓存，避免旧配置残留影响：

npm cache clean --force
rm -rf node_modules/.cache
npm run build

额外检查（仅针对Eject后的项目） #

如果你的项目执行过eject操作，需要确认webpack配置中的ModuleScopePlugin是否正确排除了node_modules：
在config/webpack.config.js中找到对应配置，确保它只限制src目录内的相对导入，允许node_modules的绝对导入：

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

// ...

plugins: [
  new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
  // ...其他插件
]

该配置是react-app默认设置，一般无需修改，除非你自定义了导入规则。

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