React项目使用@field装饰器遇语法错误，请求排查配置问题

1. 确认Babel插件配置顺序与参数 #

装饰器插件必须放在babel插件列表的最前端，且必须开启legacy: true参数（WatermelonDB依赖旧版装饰器语法规范）。检查你的package.json中babel配置是否符合要求：

{
  "babel": {
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      "@babel/plugin-proposal-class-properties"
    ],
    "presets": ["react-app"]
  }
}

2. 处理Create React App（CRA）项目的配置覆盖问题 #

如果你的项目基于CRA，直接修改package.json的babel配置会被CRA默认配置覆盖，需要用自定义配置工具绕过：

• 安装依赖：npm install craco --save-dev
• 根目录创建craco.config.js文件：

module.exports = {
  babel: {
    plugins: [
      ["@babel/plugin-proposal-decorators", { legacy: true }]
    ]
  }
};

• 修改package.json中的启动脚本：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

3. TypeScript项目额外配置 #

如果项目使用TypeScript，需在tsconfig.json中开启装饰器支持：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

4. 清除缓存并重启服务 #

缓存可能导致配置不生效，执行以下操作：

• 运行npm start -- --reset-cache
• 或手动删除node_modules/.cache目录后重启开发服务

5. 检查依赖版本兼容性 #

确保@babel/core与@babel/plugin-proposal-decorators版本匹配（均为7.x系列），执行npm list @babel/core查看核心版本，再安装对应版本的插件：

npm install @babel/plugin-proposal-decorators@^7.23.0 --save-dev

6. 确认自定义Babel配置文件优先级 #

如果项目根目录存在.babelrc或babel.config.js，Babel会优先读取这些文件的配置，而非package.json中的babel字段。将装饰器插件配置移到对应文件中，比如babel.config.js：

module.exports = {
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }]
  ],
  presets: ["react-app"]
};

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