如何解决babel-loader报错：Module parse failed: Unexpected token？

问题根源 #

报错里的??是空值合并运算符，你的项目使用的react-scripts@4.0.3默认Babel配置未支持该语法，且react-multistep@5.3.0的编译产物直接保留了这个语法。而Create React App默认不会转译node_modules目录下的代码，导致Webpack无法解析该语法。

可行解决方案 #

方案一：降级react-multistep到兼容版本 #

选择一个未使用空值合并运算符的旧版本，比如4.3.0：

yarn remove react-multistep
yarn add react-multistep@4.3.0

执行完成后重启项目：

yarn start

方案二：通过craco配置转译react-multistep（无需eject） #

如果不想降级包版本，可以通过craco修改CRA的默认配置，让Babel转译指定的node_modules包：

1. 安装craco依赖：

yarn add @craco/craco --dev

2. 在项目根目录创建craco.config.js文件，写入以下配置：

module.exports = {
  babel: {
    loaderOptions: {
      // 只转译react-multistep，排除其他node_modules包
      ignore: [/node_modules\/(?!react-multistep\/)/],
    },
    presets: [
      // 添加预设支持新语法
      ['@babel/preset-env', { targets: 'defaults' }]
    ]
  }
};

3. 修改package.json里的启动脚本：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

4. 安装所需的Babel预设：

yarn add @babel/preset-env --dev

5. 重启项目：

yarn start

方案三：升级react-scripts到新版本 #

react-scripts@5.x及以上版本的默认Babel配置已支持空值合并运算符，可尝试升级：

yarn add react-scripts@latest

注意：升级可能引发其他依赖的兼容性问题，完成后需全面测试项目功能。

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