React项目Babel与ESLint配置报错：Unknown option: .module. 求助

报错信息 #

Line 0: Parsing error: Unknown option: .module. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options

问题原因 #

你的babel.config.js里错误混入了Webpack的配置代码——module.rules是Webpack用来配置loader的专属语法，并非Babel本身的配置项。ESLint通过@babel/eslint-parser调用Babel解析代码时，无法识别这个陌生的module字段，因此抛出解析错误。

修复方案 #

删除babel.config.js中的Webpack配置代码，只保留Babel原生的presets和plugins配置：

module.exports = {
  presets: [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": "3.22"
      }
    ]
  ],
  plugins: ["@babel/plugin-proposal-optional-chaining"],
};

补充说明 #

• 若你的项目是通过create-react-app初始化的，react-scripts已内置Webpack与Babel的集成配置，无需手动在Babel文件中编写loader规则（除非执行过eject命令）。
• 你的.eslintrc配置无问题，无需修改。

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