DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Simplest Way to Install Babel Plugins in Create React App
Anson Heung
Anson Heung

Posted on

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) */
  )
);
Enter fullscreen mode Exit fullscreen mode

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

Top comments (7)

Collapse
 
walterfcarvalho profile image
Valter f Carvalho

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

Collapse
 
bhps69 profile image
bhps69

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

Collapse
 
ansonh profile image
Anson Heung Author

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

Collapse
 
walterfcarvalho profile image
Valter f Carvalho

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

Collapse
 
bhps69 profile image
bhps69

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

Thread Thread
 
ansonh profile image
Anson Heung Author

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

Collapse
 
bhps69 profile image
bhps69

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

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!