Issues when setting up Mobx with create-react-app

Question

I'm getting an error when setting up Mobx with react, can anyone give me a simple step by step? I'm fairly new to React and I'm still getting my head around the files that come with it.

Here's what I did:

• Used create-react-app
• ejected app
• Ran npm install --save mobx mobx-react
• ran npm install --save-dev @babel/plugin-proposal-decorators

• I then edited the package.json file:

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

Here's the problem I'm getting:

What I tried:

The error seems to suggest that I need to set legacy to true in node_modules\@babel\plugin-proposal-decorators\lib\index.js. I tried that and it didn't work. I searched for the problem on google and it seems like it could be an issue with Babel 7?

Answer 1

You need to pass the option with the config you setup in your package.json

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

You can check the docs here: https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html