使用Babel插件时遇解析错误：找不到babel-plugin-transform-react-jsx

核心问题 #

你当前混用了Babel 7核心工具（如@babel/eslint-parser、@babel/preset-react）与Babel 6旧插件（如babel-plugin-transform-react-jsx@6.x），两者命名空间和加载逻辑不兼容，导致插件无法被正确识别。

具体修复步骤 #

1. 替换旧插件为Babel 7兼容版本 #

卸载Babel 6的过时插件，安装对应Babel 7包：

npm uninstall babel-plugin-transform-react-jsx babel-plugin-transform-class-properties babel-plugin-transform-object-rest-spread
npm install --save-dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread

注意：@babel/preset-react已内置JSX转换功能，无需单独安装@babel/plugin-transform-react-jsx

2. 更新.babelrc配置 #

替换旧的Babel 6配置为Babel 7规范：

{
  "presets": ["@babel/preset-react", "@babel/preset-env"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    ["module-resolver", {
      "root": ["./src"]
    }],
    ["import-rename", {"^(.*)\\.jsx$": "$1"}]
  ]
}

若babel-preset-exp是项目必需预设，请确认其是否兼容Babel 7，否则建议移除并使用官方预设组合。

3. 修复Babel核心包依赖 #

将@babel/core从optionalDependencies移到devDependencies（它是Babel工具链的必需依赖）：

"devDependencies": {
  // ... 现有依赖
  "@babel/core": "^7.22.6",
  // ...
},
"optionalDependencies": {
  "typescript": "4.2.4"
}

4. 清理依赖并重装 #

rm -rf node_modules package-lock.json
npm install

5. 优化ESLint配置（可选） #

确保@babel/eslint-parser能正确读取Babel配置，可在.eslintrc.js中显式指定配置路径：

module.exports = {
  parser: "@babel/eslint-parser",
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true
    },
    babelOptions: {
      configFile: "./.babelrc"
    }
  },
  // ... 其他配置
};

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