本地Chrome运行React日历报错：JSX实验语法未启用，求解决方案

• 检查并安装必要的Babel依赖
  确保项目已安装核心Babel工具和React预设，执行命令：

  npm install @babel/core @babel/preset-react @babel/preset-env --save-dev
  

• 配置Babel识别JSX语法
  在项目根目录创建或修改.babelrc（或babel.config.json）文件，添加React预设：

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

• 确保构建工具关联Babel配置

  • 若使用Webpack，需配置babel-loader处理JS/JSX文件，修改webpack.config.js：

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

  • 若使用Create React App，无需手动配置，但如果执行过eject，需检查package.json的babel字段是否包含@babel/preset-react。

• 规范文件扩展名
  包含JSX语法的文件需使用.jsx后缀，若要保留.js后缀，需在Babel配置中添加{"plugins": ["@babel/plugin-transform-react-jsx"]}。

• 修复复刻项目的运行问题
  复刻项目后，先执行npm install完整安装依赖，再检查package.json的启动脚本是否正确，比如：

  "scripts": {
    "start": "react-scripts start"
  }
  

  若使用自定义构建脚本，需确保脚本中调用了Babel编译步骤。

• 清除缓存重新构建
  执行以下命令清理依赖缓存并重新构建：

  rm -rf node_modules package-lock.json
  npm install
  npm run build
  

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