Support for the experimental syntax 'decorators-legacy' isn't currently enabled How To Enable In Create React App?

Question

I am trying to get up and running with react create app and mobx state tree. I keep getting

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

I never used react create app so I am not sure how to enable, I tried making a .babelrc file but that did not help

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


import React, { Component } from "react";
import { observer, inject } from "mobx-react";

@inject("domainStores")
@observer
export default class MainComponent extends Component {
  async componentDidMount() {}

  render() {
    return <div className="main-container">
            helllo

    </div>;
  }
}

I am also open to suggestions if things have changed, I have not used the newest version of Mobx State tree so many there is a better way of doing this now?

Answer 1

CRA does not allow you to extend your own configuration, so, in order to extend cra configuration, you will have to use customize-cra with react-app-rewired.

So, follow the steps below:

1. Install customize-cra, react-app-rewired and @babel/plugin-proposal-decorators using npm or yarn
2. add config-overrides.js at root level of your project and paste the code given below:

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

3. Update package.json scripts to the below ones:

"start": "react-app-rewired start",
"build": "react-app-rewired build"

P.S: if you want to use babel configuration then your config-overrides.js should be like:

const {override, addDecoratorsLegacy, useBabelRc } = require('customize-cra');
module.exports = override(addDecoratorsLegacy(), useBabelRc());

useBabelRc will load config from your root of project automatically.