Syntax error - Support for the experimental syntax 'decorators-legacy' isn't currently enabled

在 cra 中使用装饰器时报如下错误:

Syntax error - Support for the experimental syntax 'decorators-legacy' isn't currently enabled

首先安装依赖

  • npm i -D @babel/plugin-proposal-decorators babel-plugin-import customize-cra react-app-rewired

根目录创建config-overrides.js

const {
  override,
  fixBabelImports,
  addDecoratorsLegacy
} = require("customize-cra");

module.exports = override(
  fixBabelImports("import", {
    //antd按需加载
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css"
  }),
  addDecoratorsLegacy() //配置装饰器
);

解决方案:在package.json中添加配置

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