"npx create-react-app my-app" stopped working in 4.0.3

[peterbe]

Describe the bug

/tmp
▶ npx create-react-app my-app

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

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

npm ERR! code 1
npm ERR! path /private/tmp
npm ERR! command failed
npm ERR! command sh -c create-react-app my-app

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/peterbe/.npm/_logs/2021-02-23T16_06_05_071Z-debug.log

/tmp
▶ npx --version
7.5.6

If create-react-app is not meant to work with npx, then https://create-react-app.dev/docs/getting-started/ is wrong.

Did you try recovering your dependencies?

not applicable

Which terms did you search for in User Guide?

• npx
• getting started

Environment

OSX Big Sur
npm 7.5.6
node v15.2.1

Steps to reproduce

cd /tmp/
npx create-react-app my-app

Expected behavior

That it should create a directory called my-app.

Actual behavior

See error above.

Reproducible demo

Not applicable.

[peterbe]

Doesn't work for npm init either :(

/tmp
▶ npm init react-app my-app
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

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

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

npm ERR! code 1
npm ERR! path /private/tmp
npm ERR! command failed
npm ERR! command sh -c create-react-app "my-app"

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/peterbe/.npm/_logs/2021-02-23T16_19_01_954Z-debug.log

[Sverxsro4nik]

Faced a similar problem. The package was not installed globally, but there is no way to deploy the project

[BenJenkinson]

I just encountered this problem as well.

As a possible workaround, this worked for me:

npx create-react-app@latest my-app

[Sverxsro4nik]

npx create-react-app@latest my-app

Many thanks. It helped. Launched

[peterbe]

So all we have to do is sit tight and wait for a new release? That seems reasonable. We can simply keep this issue open till 4.0.4 comes out and then we go back and check that you no longer need to add the @latest to make it work. And if so, close this.

[BenJenkinson]

So all we have to do is sit tight and wait for a new release? That seems reasonable. We can simply keep this issue open till 4.0.4 comes out and then we go back and check that you no longer need to add the @latest to make it work. And if so, close this.

I'm not sure it's related to 4.0.3 specifically. After all, we weren't running 4.0.3, that's why the error was shown.

npx was running a cached copy of an earlier create-react-app version (4.0.1 in your original issue @peterbe) that then complained because it recognised there was a newer version available.

create-react-app/packages/create-react-app/createReactApp.js

Lines 204 to 211 in 8bf050a

	if (latest && semver.lt(packageJson.version, latest)) {
	console.log();
	console.error(
	chalk.yellow(
	`You are running \`create-react-app\` ${packageJson.version}, which is behind the latest release (${latest}).\n\n` +
	'We no longer support global installation of Create React App.'
	)
	);

[peterbe]

You're right! I didn't even notice the You are running create-react-app 4.0.1, which is behind the latest release (4.0.3). line till now. Nuts.
I think I know why my brain didn't stop that. Because the prompt asked

Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

So you're definitely thinking that this need to be installed and that it would use the latest and greatest.

I guess the mystery is; where and why is npx caching these things? npx --help doesn't state anything obvious. Perhaps I need to dig much deeper into how npm works and env vars or something. Sigh.

[BenJenkinson]

This same kind of issue has been reported several times now:

• start fails right after create-react-app #10518 "start fails right after create-react-app"
• Not working after update #10495 "Not working after update"
• npx create-react-app is not working #10132 "npx create-react-app is not working"
• Issues with running npx create-react-app on node 15.2.1 #10127 "Issues with running npx create-react-app on node 15.2.1"
• npx create-react-app my-app is isn't installing the packages and i try uninstalling npm using -g but still. #10133 "npx create-react-app my-app is isn't installing the packages and i try uninstalling npm using -g but still"
• error running npx create-react-app@next #9910 "error running npx create-react-app@next"

These were all ultimately resolved with either:

npx create-react-app@latest my-app

Or, in one case (#10495 (comment)), the exact opposite of what the error message tells you to do:

npm install -g create-react-app

npx create-react-app my-app

I suspect this is because the warning against "global" installs is really just checking for "is the version being run the latest version" which would be OK immediately after installing it globally, but then wouldn't be OK two weeks & two new versions later.

There are also a lot of solutions that suggest completely uninstalling and reinstalling node & npm, which I think is mostly a really dramatic way to ensure you have cleared npm's (and presumably npx's) cache of installed packages.

[joselvelez]

I just encountered this problem as well.

As a possible workaround, this worked for me:

npx create-react-app@latest my-app

Thanks! This worked for me.

[peterbe]

So a lot of people fall into this pitfall. Bummer. If we change the documentation to recommend using @latest, so many of those filed issues would go away. In a sense. Is that an interesting option?

[BenJenkinson]

I think there are two scenarios that can happen, and I think the error message is shown for both but the contents of the error message only apply to one of the scenarios.

• The version of create-react-app run being out-of-date because it was installed globally
  • ✅ show error message, instructions to uninstall globally apply
  • ▶ Resolved with instructions in error message
• The version of create-react-app run being out-of-date because it was cached by npx or npm init somewhere
  • ❌ shows same error message, instructions don't help at all, lots of stuck people with issues
  • ▶ Resolved by npx create-react-app@latest my-app

I also don't think it helps that the error message is so definitive about the global install being the only reason you're seeing the error (it's not checking for a global install after all, only checking if there's a newer version)

[peterbe]

Excellent! A solution could be to improve the error messaging to mention this thing about it being potentially cached. Because I don't have create-react-app installed globally so that part of the error wasn't helping me.
This idea actually feels more correct and less hacky that forcing that @latest thing should you shouldn't ultimately need to do.

A middle-ground option might be to mention some of these things, as a loud warning/note, in the documentation.
I still don't know what this create-react-app 4.0.1 is on my machine.

(Also, I hate that I now have 3 ways of running NPM packages: npm install -g, yarn global and npx)