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

My project built the application based on react-app-rewired, then installed mobx again, mobx-react dependency package import, error reporting：Support for the experimental syntax 'decorators-legacy' isn't currently enabled，When you see an error, install again @Babel/plugin-proposal-decorators, @Babel/plugin-proposal-class-properties, @Babel/preset-env, Babel-plugin-transform-decorators-legacy still exists an error after import

import CounterView from './CounterView';
  5 |
> 6 | @observer // this decorator is must
    | ^
  7 | class MobxCounter extends React.Component {
  8 |   // 观察者
  9 |   @observable count = 0;

.babelrc file:

 "presets": [
    "@babel/preset-react",
    "@babel/preset-env",
    ["react-app", {
      "absoluteRuntime": false
    }]
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {
      "legacy": true
    }],
    ["@babel/plugin-proposal-class-properties", {
      "loose": true
    }],
    "transform-decorators-legacy"
  ]

config-overrides.js file:

/* config-overrides.js */
const {
  override,
  fixBabelImports,
  addBabelPresets,
  addBabelPlugins,
  useBabelRc,
  disableEsLint,
  addDecoratorsLegacy
} = require('customize-cra');
const rewireCssModules = require('react-app-rewire-css-modules');
const path = require('path');

...省略

module.exports = override(
  useBabelRc(),
  disableEsLint(),
  //添加装饰器,确保安装了@babel/plugin-proposal-decorators。
  addDecoratorsLegacy(),
  ...addBabelPresets('@babel/preset-react', '@babel/preset-env', [
    'react-app',
    {
      absoluteRuntime: false
    }
  ]),
  ...addBabelPlugins(
    //启用ES7的修改器语法（babel 7), 还有{ "legacy": true }一定不能掉，否则报错
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }]
  ),
  ...省略
);

How to solve this problem, please help me, ok?

[dqu]

I think you are trying to do the same thing in too many places. You’re trying to enable decorators in addDecoratorsLegacy(), addBabelPlugins(...), and .babelrc, and somewhere in there it’s going wrong.

To enable decorators in my project, all I needed to do was add the addDecoratorsLegacy() function to config-overrides.js, like so:

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

module.exports = override(
  addDecoratorsLegacy()
);

Make sure you have the Babel plugin for decorators installed as well.

npm install --save-dev react-app-rewired
npm install --save-dev customize-cra 
npm install --save-dev @babel/plugin-proposal-decorators

package.json:

...
scripts": {
    "start": "react-app-rewired start",
...
},
"devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "customize-cra": "^0.4.1",
    "react-app-rewired": "^2.1.3"
}
...

[MoonCheung]

@dqu Thank you for helping me solve the problem, because I am in the config-overrides.js configuration file containing errors caused by the conflict between CRA 2.0 and CRA 1.0, CRA 1.0 has been excluded, and then it can be normal to indicate that the decorator supports