How to update ReactJS's `create-react-app`?

Question

The ReactJS docs stated we can use

npx create-react-app my-app

to create a React app. But how do we update the create-react-app? Is there a general rule if it is something started by npx? I keep on clicking on some links and reached the site https://create-react-app.dev/ and it has a line:

npm install react-scripts@latest

but I wonder if I run it, it is not -g (global), so will it let us create a React app in any folder? Also when I ran it, it gave:

found 6289 vulnerabilities (4974 low, 306 moderate, 1004 high, 5 critical)

so there seems to be something that needs to be done extra.

Answer 1

If it's an existing app, usually updating package.json to the latest version manually works well (I haven't had any issues with it, but it may break, depending on how old your project is).

npx will use the latest version, provided you didn't have a global one installed. If so, uninstall first:

npm uninstall -g create-react-app

Then run:

npx create-react-app my-app

If the version you see in the package is the latest (right now it's 3.4.0) it means you did get the latest one. It may be another package throwing the warnings?

Answer 2

npx is a package runner, from the docs:

Executes either from a local node_modules/.bin, or from a central cache, installing any packages needed in order for to run.

By default, npx will check whether exists in $PATH, or in the local project binaries, and execute that. If is not found, it will be installed prior to execution.

So unless you have installed create-react-app globally (your shouldn't), it will download the latest and use it. On the second command you found:

npm install react-scripts@latest

This is not for updating create-react-app CLI, but the react-scripts version used in the react-app itself. react-scripts is the package that bundles the babel, webpack and all the configuration in your react application.

From the docs:

create-react-app is a global command-line utility that you use to create new projects.

react-scripts is a development dependency in the generated projects (including this one).

Answer 3

ERR:You are running create-react-app 4.0.1, which is behind the latest release (4.0.3).

npm install -g create-react-app

This updates it to latest version globally. And then you can run 'npx create-react-app appname'

Answer 4

npx is a CLI tool whose purpose is to make it easy to install and manage dependencies hosted in the npm registry or any locally installed packages. It has ability to execute a package that wasn’t previously been installed.

NPX will always execute the latest available version in the NPM registry unless the version is specified.

If you have already installed create-react-app globally, then you can solve the problem by first trying to uninstall the npm globally, update the npm and then clear the cache(Note: It's important to clear the cache).

The command is as below:

sudo npm uninstall -g create-react-app && sudo npm i -g npm@latest && sudo npm cache clean -f

Please refer the docs for clearing the cache.

In latest releases, create-react-app does not support global installations.