I love using Create React App to spin up an application swiftly, but one annoyance I continuously run into is the lack of ability to modify the Babel configuration. Why would you want to do this? Perhaps you want to use some of the latest ES.next features before they're approved and merged into Create React App. In this case, you may eject the app, but there are several reasons why you don't want to do that.
For this article, we're going to add both the nullish coalescing operator and optional chaining syntax babel plugins. These plugins are both excluded from Create React App at the time of writing.
Begin by firing up your terminal and installing Create React App with the following command:
The first step may take a while to complete depending on your internet connection. If you do not have
npx installed, run
npm install --global npx or
yarn global add npx and then try the previous step again. We need two separate packages to override the configuration,
react-app-rewired. We're not calling
react-app-rewired directly, but it's a required dependency of
package.json in your editor of choice and replace all references to
react-scripts under the
scripts property with
react-app-rewired. Once complete, your
scripts should look like this:
Create a new file called
config-overrides.js in the project root directory.
customize-cra has various utility functions you can use to configure virtually all aspects of the babel and Webpack config. In our case,
addBabelPlugins is what we need to add both plugins.
config-overrides.js and add the following:
For both of the plugins to work correctly, we'll need to install the packages.
You can now test this all works by running
npm start in your terminal. Open
src/App.js, remove all the boilerplate code and add an expression to verify babel is transpiling the bundle correctly.
In this example, you should have no errors in the Webpack output, and
foo bar is rendered on the screen.
Hey there, I'm Devin, the creator of this blog. Outside the digital world, my time is well spent with my wife and two children. Whenever I get the chance, I enjoy listening to music or audiobooks, reading business books, and playing mobile games.