TLDR: Uninstall the global package using npm uninstall -g create-react-app
and generate new react apps using npx create-react-app app
.
Issue
You're using an older version of create-react-app
that you have installed globally using npm. The create-react-app
command invokes this global package.
You could've confirmed that you were using an outdated version by running npm outdated -g create-react-app
or comparing create-react-app --version
with npm view create-react-app
.
The fact that the version of react-scripts
was up to date, has nothing to do with the version of the package that is bootstrapping the app (create-react-app
), which grabs the latest versions of the packages that it uses (react-scripts
in this case).
Solution
If you want to continue using the create-react-app
command, you'll need to update the global package using npm update -g create-react-app
. Note that you'll want to do this periodically to keep it up to date. You'll notice that create-react-app
does not recommend this (noted in the logs from your install).
A better approach would be to delete the global install entirely (npm uninstall -g create-react-app
) and instead use npx
so that it grabs the latest version of the package every time (more detail on npx
below).
You should confirm that it was uninstalled globally by trying to use create-react-app
to make sure the command is "not found".
Issues with uninstalling?
You can debug where it was installed using which create-react-app
. If you're having issues uninstalling it, you may have multiple versions of node/npm on your machine (from multiple installs, or because you use a node version manager such as nvm
). This is a separate issue I won't address here, but there's some info in this answer.
A quick nuclear approach would be to forcefully remove it (rm -rf
) at the path that which create-react-app
returns.
Supplement
Global npm packages and the npx
command
$ NPM_PACKAGE_NAME
will always use the globally installed version of the package, regardless of which directory you're in.
$ npx NPM_PACKAGE_NAME
will use the first version of the package that it finds when searching up from the current directory to the root:
- If you have the package in your current directory, it will use that.
- Else if you have the package in a directory that is a parent of your current directory, it will use the first one it finds.
- Else if you have the package installed globally, it will use that.
- Else if you don't have the package at all, it will temporarily install it, use it, and then discard it. - this is the best way to ensure the package is up to date.
More info about npx can be found in this answer.
Using npx
with create-react-app
create-react-app
has some special commands/aliases to create a react app (instead of npx
) that are specific to that package (yarn create react-app
, npm init react-app
), but npx create-react-app
will work the same as it does with other packages.
yarn
vs npm
global installs
Yarn stores global installs in a different folder than npm
, which is why yarn create react-app
would work immediately without uninstalling the global npm package (as far as yarn is concerned, the package hasn't been installed).
This is just a temporary solution though, as you'll need to remember to always use yarn instead of npm when using Create React App.
yarn global upgrade create-react-app
- then doingyarn create react-app my-app
– SamYoungNYlocate create-react-app
and deleting all directories that hadcreate-react-app
in the name. Only then didnpx create-react-app
finally work normally again for me. – Kai Carver