Leigh Halliday

mobxjavascriptreact

MobX in Create React App Without Ejecting

1 min read

You do not have to eject from create-react-app to get support for decorators and other babel plugins. MobX works fantastic with decorators and I’ve always been ejecting to get that working… but there is no longer a need to do that!

In this video we’ll take a look at how we can get MobX working with decorators without having to eject from create-react-app. We’ll be using a package called react-app-rewired to accomplish this.

The full code is https://github.com/leighhalliday/mobx-decorators-without-ejecting

Packages Used

Here is a list of the packages we used in this demo:

  • react-app-rewired
  • react-app-rewire-mobx
  • babel-plugin-styled-components

Files Changed

In config-overrides.js:

const { injectBabelPlugin } = require("react-app-rewired");
const rewireMobX = require("react-app-rewire-mobx");

module.exports = function override(config, env) {
  config = injectBabelPlugin("babel-plugin-styled-components", config);
  config = rewireMobX(config, env);

  return config;
};

In package.json modify the scripts to be:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom",
  "eject": "react-app-rewired eject"
}