升级Webpack 5、Babel 7、React 17后项目出现JSX模块解析错误

当前babel-loader的配置存在缺失：仅开启了缓存开关，没有配置任何用于转译JSX、现代JavaScript语法的Babel规则，导致Babel碰到<Provider>这类JSX专属语法时无法识别，最终抛出模块解析失败的错误。

• 补全Babel核心转译规则，二选一即可：
  1. 直接在webpack的babel-loader配置中添加规则
     替换原有babel-loader的use配置为：

     use: {
         loader: 'babel-loader',
         options: {
             cacheDirectory: true,
             presets: [
                 ['@babel/preset-env', { targets: "defaults" }],
                 '@babel/preset-react'
             ],
             plugins: ['@babel/plugin-transform-runtime']
         }
     }
     

     其中@babel/preset-env负责转译现代JS语法，@babel/preset-react专门负责识别解析JSX语法，两者是转译React代码的核心依赖。
  2. 在项目根目录新建babel.config.json文件存放配置，和webpack配置解耦：

     {
         "presets": [
             ["@babel/preset-env", { "targets": "defaults" }],
             "@babel/preset-react"
         ],
         "plugins": ["@babel/plugin-transform-runtime"]
     }
     

     这种方式下webpack中的babel-loader不需要再重复写options配置，维护起来更清晰。
• 清理冲突依赖
  当前devDependencies中的babel-preset-react-app@9.x是适配老版本Create React App的预设包，如果项目没有直接沿用CRA的内置构建逻辑，直接删除该依赖即可，避免和手动配置的Babel规则产生冲突。
  另外注意当前package.json中react、react-dom仍为16.13.1版本，如果目标是升级到React17，要在转译问题解决后同步升级运行时依赖，不要仅升级构建工具版本。
• 适配Webpack5的规则调整
  当前配置中注释了Webpack5内置的静态资源处理规则，临时沿用url-loader、file-loader虽然能跑，但建议后续逐步替换为Webpack5内置能力，减少外部依赖的兼容问题：
  • 原url-loader对应的图片内联规则，替换为type: 'asset/inline'
  • 原file-loader对应的静态资源输出规则，替换为type: 'asset/resource'
• 验证修复效果
  配置修改完成后，删除node_modules和项目锁文件，重新安装依赖后启动构建，原有的JSX解析报错就会消失。

内容的提问来源于stack exchange，提问作者Hana Likes Coding