无法使用生物装饰器，错误：当前未启用对实验语法'decorators-legacy'的支持

Question

[我正在尝试使用mobx装饰器，以前在React native上安装和使用它没有问题，但是现在我正在使用React.Js库开发一个网站，它给了我这个错误。

Support for the experimental syntax 'decorators-legacy' isn't currently enabled (25:1):

  23 | 
  24 | 
> 25 | @observer
     | ^
  26 | class Recomended extends Component{
  27 |   constructor(props) {
  28 |     super(props);

任何人都可以帮助使其正常工作。

下面是我的包裹。杰森：

{
  "name": "airingbot",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@createjs/tweenjs": "^2.0.0-beta.4",
    "babel-plugin-mobx-deep-action": "^1.6.1",
    "es6-tween": "^5.5.10",
    "mobx": "^5.14.2",
    "mobx-react": "^6.1.4",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.2",
    "three-orbit-controls": "^82.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "babel": {
    "plugins": [
      "transform-decorators-legacy",
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "presets": [
      "react-app"
    ]
  },

  "devDependencies": {
    "babel-plugin-transform-decorators-legacy": "^1.3.5"
  }
}

Answer 1

[我认为这些步骤可能有助于向使用create-react-app创建的React应用程序中添加装饰器支持：

1. npm install --save-dev react-app-rewired babel-plugin-transform-decorators-legacy
2. 用react-scripts中的react-app-rewired替换package.json

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  ...
}

3. 在项目的根目录下创建一个新文件config-overrides.js，然后复制下一个内容：

const { override, addDecoratorsLegacy } = require('customize-cra')

module.exports = override(addDecoratorsLegacy())