how to use mobx with create-react-app without run eject

mobx logo

Mobx is today one of the most popular libraries in the world of Javascript and especially that of react to ensure the management of global states in our applications. The easiest way to use mobs is in combination with decorators (A decorator is an object that adds functionality to another object in a dynamic way). But it turns out that the use of decorators are disabled by default with CRA (create-react-app).

So ! there are several ways to get around this in this tutorial we will learn how to do it without having to eject the configurations CRA (with npm run eject).

NB: It is assumed that you have already used mobx and want to migrate your code or support the decorators in your project.

To do it is something relatively simple :

1- Installation of some dependencies

| npm install customize-cra react-app-rewired --save-dev

2- Add config-overrides.js configuration file to the root of your project

add this minimum configuration :

const {
disableEsLint,
addDecoratorsLegacy,
override} = require("customize-cra");
module.exports = {
  webpack: override(
    // usual webpack plugin
    disableEsLint(),
    addDecoratorsLegacy()
)
};

3- Modify your package.json

| /* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

At this point everything will have to work properly go test there: npm start

That’s it for this article! I hope you enjoyed it and leave a few claps if you did. Follow me for more article