Should you eject your Create React App?

Posted on November 04, 2020


Create React App is a program that helps you to create single-page React applications with all the standard configurations. You can think of Create React App as a builder that handles the building of your React app, allowing you to focus on writing the code.

To make the browser understand React-based code, you need to configure tools like Webpack and Babel. With Create React App, these tools are preconfigured and hidden. Just create a new application and you’re good to go.

But because Create React App is pre-configured, that means there might be some settings that you aren’t satisfied with. Maybe you want to use LESS to write your style. Maybe you want to use Webpack’s latest version with your React application (As of this writing, Webpack 5 has been released but CRA still use Webpack 4)

To handle this case, Create React App created a special command that allows you to spit out the configuration files so that you can customize it as you need:

npm run eject

When you run npm run eject command in your React application, you will be able to edit the configuration and script files. You also can upgrade or downgrade the dependencies version on the ejected package.json file.

But the eject command comes with a price. Once you eject, you can’t go back and hide the configuration files. You will have to maintain your React app configuration on your own. This means:

  • You need to update the dependencies and ensure its not broken when a new version is released
  • If Create React App released a new version, you can’t update your application to the new version

In addition, the React scripts directory which contains the Webpack process is quite complicated. You need to have a good understanding of how Webpack works to maintain it.

Now that you know the cost of ejecting, it’s time to answer the question.

Should you eject your Create React App?

Create React App was created with the community feedback. New features have been added to it throughout the years in order to fit the need of common React projects. If you’re confident that you can maintain the configuration, I suggest you write your own configuration from scratch. That way, you won’t be confused by any configuration that you didn’t write yourself.

Developers also have created a workaround so that you can tweak Webpack configurations without ejecting. React App Rewired is one such example. But even React App Rewired doesn’t have any warranty. If it breaks, you need to fix it yourself or find community help.

If you don’t want to maintain your own configuration and you aren’t satisfied with CRA configs, you may be better to use other React application builder like Next.js, which supports custom webpack config.

Conclusion

Create React App is a convenient tool that allows you to develop React application without having to configure the required build tools. But it’s an opinionated tool, which means there will always be some unsupported “way” of building React application. When you find CRA configuration lacking, you can eject the configuration so you can edit it, but you’ll need to maintain your configuration.

If you ask me, I recommend you to either write and maintain your own configuration or you use other React app builder like Next.js, which has custom webpack config built-in. If you use CRA, then accept the limitations and don’t eject from it.

More about React:

Level up your React skill today 🔥

Build FOUR projects using React with my latest book.

Structured knowledge from beginner to experienced level!

Learn more