How to get MobX Decorators to work with Create-React-App v2?

Question

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

I tried adding the decorators-legacy babel plugin and @babel/plugin-proposal-decorators with { legacy: true } in .babelrc but no effect.

Anyone managed to get MobX decorators to work with CRA2?

Answer 1

Firstly, install dependencies:

yarn add react-app-rewired customize-cra @babel/plugin-proposal-decorators

Secondly, create config-overrides.js in root directory with following contents:

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

module.exports = {
    webpack: override(
        addDecoratorsLegacy(),
        disableEsLint()
    )
};

You should be able to use mobx + decorators now.

If you don't have mobx installed already, please run: yarn add mobx mobx-react. Now you can use decorators.