React Typescript项目编译报错：Unexpected token, expected "{" 求助

你的Babel配置存在两处问题，导致无法识别Typescript语法，只能按照普通JS规则解析TSX文件：

1. 没有引入@babel/preset-typescript预设，无法解析TS专属的泛型、类型标注语法
2. plugins配置格式错误，@babel/plugin-proposal-class-properties被错误嵌套在JSX插件的配置项中，没有实际生效

1. 安装依赖 #

首先安装Typescript解析所需的Babel预设：

npm install @babel/preset-typescript --save-dev

2. 修正.babelrc配置 #

调整后的完整配置如下：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript",
        "@babel/preset-react"
    ],
    "plugins": [
        [
            "@babel/plugin-transform-react-jsx",
            {
                "runtime": "automatic"
            }
        ],
        "@babel/plugin-proposal-class-properties"
    ]
}

3. 打包工具配置校验 #

确认你的打包工具（Webpack/Vite等）的loader规则已经覆盖.ts/.tsx后缀文件，将其交给babel-loader处理。如果是使用create-react-app初始化的项目，不建议自定义Babel配置，直接使用官方react-scripts的内置TS支持即可，避免配置冲突。

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