在JS文件中添加JSX遇语法支持错误，配置Babel仍未解决

可行的解决步骤： #

• 确认依赖已正确安装
  先确保所有必要的Babel相关依赖都已安装，执行以下命令：

  npm install --save-dev @babel/core @babel/preset-env @babel/preset-react
  # 或者使用yarn
  yarn add -D @babel/core @babel/preset-env @babel/preset-react
  

• 使用正确的Babel配置文件
  推荐在项目根目录创建babel.config.json（相比.babelrc，该文件在复杂项目结构下识别更稳定），内容如下：

  {
    "presets": ["@babel/preset-env", "@babel/preset-react"]
  }
  

• 调整文件扩展名或配置匹配规则

  • 最简方案：将包含JSX的.js文件重命名为.jsx，Babel默认会识别这类文件并处理JSX语法。
  • 若不想修改扩展名，可在babel.config.json中添加规则，强制处理指定目录下的.js文件：

    {
      "presets": ["@babel/preset-env", "@babel/preset-react"],
      "overrides": [
        {
          "test": "./src/**/*.js",
          "presets": ["@babel/preset-env", "@babel/preset-react"]
        }
      ]
    }
    

• 检查构建工具配置（以Webpack为例）
  如果使用Webpack打包，需确保babel-loader已正确配置，在webpack.config.js中添加：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        }
      ]
    }
  };
  

• 清除缓存并重新安装依赖
  缓存可能导致配置不生效，执行以下操作重置依赖环境：

  rm -rf node_modules package-lock.json
  npm install
  npm cache clean --force
  

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