Simplest Way to Install Babel Plugins in Create React App

The traditional way of installing Babel plugins in a Create React App project requires you to eject the app via running 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 and customize-cra:
   

   npm install react-app-rewired customize-cra --save-dev
   # or
   yarn add react-app-rewired customize-cra --dev
   

   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.

2. Install your Babel plugin(s). Suppose our Babel plugin is called babel-plugin-myPlugin:
   

   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:
   

    "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.
   

   {
     "plugins": ["babel-plugin-myPlugin"]
   }
   

5. Create config-overrides.js at the root of the project and add the following code:
   

   // 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.
   
   

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:

// 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) */
  )
);

---

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

• Follow me on Twitter: @AnsonH_
• Personal website
• GitHub profile: AnsonH

Comments

[minicatsCB]

You can also pass options to the plugin as normal. Example for plugin babel-plugin-macros in .babelrc:

{
    "plugins": [
        ["babel-plugin-macros", {"fontawesome-svg-core": {"license": "free"}}]
    ]
}

[Shub]

Thanks :) I was trying to use preact/signals-react in a CRA project but couldn't as CRA doesn't allow babel. This came in handy!

[Valter f Carvalho]

Very good simple objective funcional awesome explanation, works fine and was exactaly what I've beeen findind. thanks a lot.

[bhps69]

whats the' .... ' after module.exports?

[Anson Heung]

Sorry which code block are you referring to? The last or the second last code block?

[Valter f Carvalho]

just create on file called config-override.js on root application directory and paste those lines.

[bhps69]

yes, i have pasted them , but i dint understand what those three dots mean? is it a new line continuation marker?

[Anson Heung]

The three dots (...) is the JavaScript spread syntax.

[Huang Yue]

How to do the same thing with typescript?

[bhps69]

The code for config-over
Module.exports=override ( ?