Upgrade Create React App-Based Projects to Version 4 (CRA 4)

An in-depth guide on how to upgrade Create React App-based projects to the latest version

Photo by the author.

Create React App is a quick way to scaffold a React project. It can be easily generated by the command npx create-react-app <project name>. Then you have the latest packages and the execution environment for a React project. It is convenient and effective.

Everything is great when it is fresh.

As time goes on, there will be new versions of Create React App that have new features and under-the-hood improvements. What then?

In this article, we’ll use Create React App 4 (CRA 4) as an example to walk through the process of upgrading Create React App-based projects.

Upgrade react-scripts

The official documentation recommends running the following command to upgrade:

npm install --save react-scripts@latest

react-scripts includes scripts and configuration. By running this command, we upgrade react-scripts from version 3.4.3 to version 4.0.0 smoothly.

Here is the difference in package.json:

Yes, we have upgraded the version of react-scripts. However, there are more things that need to be taken care of if one compares package.json with the newly installed Create React App 4’s package.json:

Upgrade React Versions

The most noticeable difference is the React versions. react and react-scripts remain ^16.13.1, while the latest Create React App has them at ^17.0.1.

We have to manually update React versions in package.json’s dependencies:

"dependencies": {
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  ...
}