Simplest Way to Install Babel Plugins in Create React App
Tags: react, babel, javascript, webdev
Published: 2021-12-27 13:29:33

The traditional way of installing [Babel plugins](https://babeljs.io/docs/en/plugins) in a [Create React App](https://create-react-app.dev/) project requires you to eject the app via running [`npm run eject`](https://create-react-app.dev/docs/available-scripts#npm-run-eject). However, ejecting may be a bad idea because it’s a one-way operation that exposes complex configurations files.

In this article, I’ll show you how to install Babel plugins **WITHOUT ejecting** your Create React App.

## Steps

1. Install [react-app-rewired](https://github.com/timarney/react-app-rewired) and [customize-cra](https://github.com/arackaf/customize-cra):
    
    ```bash
    npm install react-app-rewired customize-cra --save-dev
    # or
    yarn add react-app-rewired customize-cra --dev
    ```

    {% details Purpose of these two packages %}
      - `react-app-rewired`: Overrides Create React App webpack configs without ejecting.
      - `customize-cra`: Provides a set of utilities to customize Create React App config, such as reading from `.babelrc`. Requires `react-app-rewired` as a dependency.
    {% enddetails %}

2. Install your Babel plugin(s). Suppose our Babel plugin is called `babel-plugin-myPlugin`:
    
    ```bash
    npm install babel-plugin-myPlugin --save-dev
    # or
    yarn add babel-plugin-myPlugin --dev
    ```

3. Open `package.json` located in the project root and edit the `"scripts"` field:
    
    ```diff
     "scripts": {
    -  "start": "react-scripts start",
    -  "build": "react-scripts build",
    -  "test": "react-scripts test",
    +  "start": "react-app-rewired start",
    +  "build": "react-app-rewired build",
    +  "test": "react-app-rewired test",
       "eject": "react-scripts eject"
     },
   ```

4. Create `.babelrc` at the **root** of the project  (where `package.json` is located) and add the following code. Replace `babel-plugin-myPlugin` with the actual name of your plugin.
    
    ```jsx
    {
      "plugins": ["babel-plugin-myPlugin"]
    }
    ```
    
5. Create `config-overrides.js` at the **root** of the project and add the following code:
    
    ```jsx
    // Overrides create-react-app webpack configs without ejecting
    // https://github.com/timarney/react-app-rewired
    
    const { useBabelRc, override } = require("customize-cra");
    module.exports = override(useBabelRc());
    ```

6. Run `npm start` or `yarn start` to start the development server and see if everything works properly.
<br>

## Without Using `.babelrc`

In the above, Step 4 requires you to create a new `.babelrc` file to register Babel plugins. Alternatively, you can **skip Step 4** (i.e., no need to create `.babelrc`) by **directly registering** Babel plugins inside `config-overrides.js`:

```jsx
// Overrides create-react-app webpack configs without ejecting
// https://github.com/timarney/react-app-rewired

const { addBabelPlugins, override } = require("customize-cra");
module.exports = override(
  ...addBabelPlugins(
    "babel-plugin-myPlugin"
    /* Add plug-in names here (separate each value by a comma) */
  )
);
```
<br>
<hr>

Thanks for reading! If you find it useful, don’t forget to like and share this post 🙌

- Follow me on Twitter: [@AnsonH_](https://twitter.com/AnsonH_)
- [Personal website](https://www.ansonh.com)
- GitHub profile: [AnsonH](https://github.com/AnsonH)