Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
peterbe opened this issue Feb 23, 2021 · 40 comments
Open

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

peterbe opened this issue Feb 23, 2021 · 40 comments

Comments

@peterbe
Copy link

peterbe commented Feb 23, 2021

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
Copy link
Author

peterbe commented Feb 23, 2021

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
Copy link

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

@BenJenkinson
Copy link

I just encountered this problem as well.

As a possible workaround, this worked for me:

npx create-react-app@latest my-app

@Sverxsro4nik
Copy link

npx create-react-app@latest my-app

Many thanks. It helped. Launched

@peterbe
Copy link
Author

peterbe commented Feb 24, 2021

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
Copy link

BenJenkinson commented Feb 24, 2021

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.

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
Copy link
Author

peterbe commented Feb 24, 2021

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
Copy link

BenJenkinson commented Feb 24, 2021

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

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
Copy link

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
Copy link
Author

peterbe commented Feb 24, 2021

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
Copy link

BenJenkinson commented Feb 24, 2021

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
Copy link
Author

peterbe commented Feb 24, 2021

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)

@fanjin-z
Copy link

fanjin-z commented Feb 24, 2021

@BenJenkinson I can confirm that running out-of-date create-react-app version triggers this error.

I think it's very unreasonable to require latest release. Many companies requires developers to use internal npm repo, which is often a few days or weeks behind. I don't see the point forcing everyone to use up-to-date version, unless there's a severe security issue.

@peterbe
Copy link
Author

peterbe commented Feb 24, 2021

I think it's very unreasonable to require latest release.

No one is saying that that is what you have to do. npx create-react-app my-app should work. That's what we're trying to figure out. What's next is to figure out if it's a matter of documentation, bug in the CLI, or improvements to the error messaging.

@BenJenkinson
Copy link

BenJenkinson commented Feb 24, 2021

I think it's very unreasonable to require latest release.

@Fnjn I don't think the purpose was to force you to use a latest version.

As far as I understand, there are issues that can occur if you run create-react-app from a global install. So the check is meant to detect that scenario and the error is to explain why and how to correct it.

But the check was written to check for when you're not running the latest version (which would occur in a "global" scenario); presumably on the assumptions that npx/npm init would always fetch and run the latest version, and if you weren't using the latest version you must be running a "global" install.

I think the CLI bug is that that assumption is wrong. As we've seen, npx and npm init can sometimes use a cached version of create-react-app that is then not the latest version, which triggers the error, which then contains advice for a scenario that isn't happening.

So, where did the change come from?

@mrmckeb
Copy link
Contributor

mrmckeb commented Feb 25, 2021

I did some digging, and this may be an npm bug, as we did research this at the time and as I understood, both npx and yarn create use the latest version - using the cached version only if that is the latest version.

It looks like this is fixed in the latest releases of npm. If you can try that, and report back, that would be greatly appreciated!

This was the trail I took:

@BenJenkinson
Copy link

I'm sorry @mrmckeb, I assumed that npm's behaviour was intentional. I didn't think to look there for a cause! Thank you for digging!

So it looks like npm/cli#2597 has fixed "npx/npm init not using the latest version" in npm@7.5.2.

That would fit my own situation (because I was using npm@7.5.1), but looking at @peterbe's original log output, he was on npm@7.5.6 when he had this problem.

@PaulB-H
Copy link

PaulB-H commented Feb 25, 2021

Latest version of npm fixed it for me.

npm install -g npm@latest

then:
npx create-react-app myapp

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

Running from terminal in VS code did not ask this, and seems to worked as usual.

@mrmckeb
Copy link
Contributor

mrmckeb commented Feb 26, 2021

It's very much OK @BenJenkinson, that info wasn't easy to find - I'd obviously done that digging before which is why I was also confused.

Thanks for the update @PaulB-H. I'd recommend instead that you remove the global install for future, as you won't need it with npx :)

@peterbe is it OK if we close off this issue now? After you confirm that it now works of course :)

@peterbe
Copy link
Author

peterbe commented Feb 26, 2021

@peterbe is it OK if we close off this issue now? After you confirm that it now works of course :)

Yeah. Sure. Part of me wishes the documentation or the error message could have done the kind of handholding I needed @BenJenkinson 's comment about using @latest.

And to be honest, I still don't know why my system thinks there's a create-react-app globally installed somewhere. I think I used to at some point when I originally discovered yarn global. (The evolution over the years has been: npm install -g, to yarn global, to npx)
For example, I still don't have it on my $PATH:

▶ create-react-app
zsh: command not found: create-react-app

But I still get the error every time:

/tmp
▶ npx create-react-app my-app003
Need to install the following packages:
  create-react-app
Ok to proceed? (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/

So the message "You are running create-react-app 4.0.1," is a bit baffling. I don't think this could be possible to get on a fresh new computer or container where you haven't gone through the old global install tools that have all been replaced with npx.

Actually, I still have no idea where this create-react-app@4.0.1 is on my machine.
I do have:

▶ ls -l ~/.npm/create-react-app
total 0
drwxr-xr-x  4 peterbe  staff  128 Feb  6  2018 0.2.0
drwxr-xr-x  4 peterbe  staff  128 Oct  1  2016 0.5.0
drwxr-xr-x  4 peterbe  staff  128 Feb  6  2018 1.0.0

But perhaps my system is just too screwed up to hold back the great work of create-react-app and people's time on this debugging.

@JosephCanete
Copy link

I just encountered this problem as well.

As a possible workaround, this worked for me:

npx create-react-app@latest my-app

This works for me!

@Barani2396
Copy link

Barani2396 commented Apr 16, 2021

Hi,

I have tried all of the solutions but this worked for me - leaving the npm/npx and only using create-react-app my-app cmd ignores the error You are running 'create-react-app' 4.0.2, which is behind the latest release (4.0.3). and builds the project file.

Hope this would be helpful!

@evank21
Copy link

evank21 commented May 6, 2021

Latest version of npm fixed it for me.

npm install -g npm@latest

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

Running from terminal in VS code did not ask this, and seems to worked as usual.

Perfect, this works. Thank you!

@daffriedman
Copy link

Thank you evank21 I also had the above issue and what you said worked for me

@tarikelhady
Copy link

just update npx to latest version =>
npm update npx

@Ashraf840
Copy link

Ashraf840 commented Jun 24, 2021

This helps me to restart my react app. A reasonable workaround while I'm still learning React.

Update - I went into the package.json and changed the react-scripts to 4.0.1 and typed npm install(terminal) and re-ran it and it fixed the issue. Hope this helps.

I have tried uninstalling the create-react-app from the global scope, even re-install the nodejs & npm completely. I'm learning React in Centos Stream 8. Then use npx create-react-app my-app, but nothing solved the issue of failing to start the react app. Then I followed the solution in the link.

It seems I have to manually change the version of react-scripts from 4.0.3 to 4.0.1 inside the "package.json" file of the react-app directory.

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.1", <<<<
"web-vitals": "^1.1.2"

Then run the command: npm install in the project's current directory,
finally re-run the react app using npm start.

Hope that works for you all until the issue is fixed!

@haraldrudell
Copy link

This still buggy at create-react-app@4.0.3 by npx@7.18.1 which seems to come with node@16.4.1

Get around is to install create-react-app in separate project that can later be deleted.

In you parent directory:

mkdir cra
cd cra
yarn init --yes
yarn add create-react-app
cd ..
./cra/node_modules/.bin/create-react-app <my-app-name>
rm -r cra
cd <my-app-name>
yarn start

@argahsuknesib
Copy link

I just encountered this problem as well.

As a possible workaround, this worked for me:

npx create-react-app@latest my-app

Thanks! It worked.

@Yashkapure06
Copy link

I just encountered this problem as well.

As a possible workaround, this worked for me:

npx create-react-app@latest my-app

Thank you Sir! It helped

@vugartaghiyev
Copy link

Hi,

npm uninstall -g create-react-app
npm i -g create-react-app
npx create-react-app appname

It works for me.

@maximarsoficial
Copy link

Also what one can do is enter the console as administrator, located in the user's folder, and put this command (in my case I used the NPM one)

npm uninstall -g create-react-app

we uninstall it and then I reinstall it

npm install -g create-react-app

and voila, it worked for me

@Rishikesh-kumar-7258
Copy link

Also what one can do is enter the console as administrator, located in the user's folder, and put this command (in my case I used the NPM one)

npm uninstall -g create-react-app

we uninstall it and then I reinstall it

npm install -g create-react-app

and voila, it worked for me

It is not working for me...
I have tried many things on net.
searched StackOverflow and also here but nothing till now

@cna-so
Copy link

cna-so commented Dec 25, 2021

I just encountered this problem as well.

As a possible workaround, this worked for me:

npx create-react-app@latest my-app

this is work and can somebody say why?

@drustin2
Copy link

drustin2 commented Dec 28, 2021

So for anyone on windows - I actually had to go to Add/Remove Programs and remove NVM from there

Doing that and the commands above after a fresh npm install everything worked.

@liuliangsir
Copy link

@drustin2 give more details?

@HansBrende
Copy link

npx clear-npx-cache fixed the issue for me: I no longer have to specify @latest to get the command to work. Should work as long as your npm version is >= 7.5.2, I believe.

@mwisnicki
Copy link

Actual workaround to use non-latest version: #12022 (comment)

@frankiefab100
Copy link

I just encountered this problem as well.

As a possible workaround, this worked for me:

npx create-react-app@latest my-app

Thank you, this works.

I think everyone will experience this each time a new version of React is released.

@CallmeKelly
Copy link

I Have been experiencing this issues and i need help on how to install react on my vs code

                                                              👇👇👇


                                PS C:\Users\acer\Desktop\app> npx create-react-app                 

Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y) Ok
npm ERR! canceled

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\acer\AppData\Local\npm-cache_logs\2022-10-25T18_45_31_636Z-debug-0.log

THIS IS THE ERROR MESSAGE I HAVE BEEN GETTING!!!😢😢😢

@evank21
Copy link

evank21 commented Oct 25, 2022

@CallmeKelly can you confirm when you see the line Ok to proceed in the console, are you entering Ok? You should be responding with y.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests