npx create-react-app myproj --template typescript fails on macOS

[davidgs]

Describe the bug

running npx create-react-app my-project --template fails to create a proper project.

Did you try recovering your dependencies?

 % npm --version
9.2.0
% 

There is no project to recover, as this is a new project. Here is the entire process:

% npm uninstall -g create-react-app

up to date in 41ms
% yarn global remove create-react-app
yarn global v1.22.17
[1/2] 🗑  Removing module create-react-app...
error This module isn\'t specified in a package.json file.
info Visit https://yarnpkg.com/en/docs/cli/global for documentation about this command.
% npx create-react-app my-project --template typescript
Creating a new React app in /Users/davidgs/github.com/my-project

Installing packages. This might take a couple minutes.
Installing react, react-dom, and react-scripts...

yarn add v1.22.17
info No lockfile found.
...
✨  Done in 34.16s.

A template was not provided. This is likely because you\'re using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.
You can fix this by running npm uninstall -g create-react-app or yarn global remove create-react-app before using create-react-app again.
% ls-l my-project
total 816
drwxr-xr-x  793 davidgs  staff   25376 Dec 21 10:14 node_modules
-rw-r--r--    1 davidgs  staff     198 Dec 21 10:14 package.json
-rw-r--r--    1 davidgs  staff  413630 Dec 21 10:14 yarn.lock

As you can see, create-react-app is wrong about the globally installed version (I have checked the node_modules directory for globally installed packages at /usr/local/lib and there is no globally installed package there). This could be a documentation issue in that it always says that (which is misleading) or it incorrectly assumes there is a globally installed version, or that it find a globally installed version somewhere (in which case it should report where it found that version).

But the end result is that an incomplete, and non-functional, app directory is created.

Which terms did you search for in User Guide?

I read this section of the user guide, as well as Issue #6119 (now closed).

Environment

my-project % npx create-react-app --info
Please specify the project directory:
  create-react-app <project-directory>

For example:
  create-react-app my-react-app

Run create-react-app --help to see all options.

Further indication that the create-react-app script fails to create a proper project.

Steps to reproduce

See above section where I provided all the commands and output.

Expected behavior

Should have been a complete react application. Instead, it was ... garbage.

Actual behavior

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[justin-tay]

Hard to really say what's wrong. I can't reproduce this on my mac. On Big Sur. Tested on npm 9.2.0 and yarn 1.22.18.

It's not really clear whether or not you want to use npm or yarn.

Using npx create-react-app my-project --template typescript means you want to use npm.

Using yarn create react-app my-project --template typescript means you want to use yarn. (Note it's not yarn create-react-app my-project --template typescript)

If you are using npx, note that npx will download and cache the package when you first run the command. Subsequently it will not download the latest package so you can have an older copy there in the npx cache. You should clear the npx cache, for instance rm -rf ~/.npm/_npx works on my mac.

If the cache is cleared, npx should prompt that it needs to install the create-react-app@5.0.1 package when you first attempt to run.

[davidgs]

So clearing the cache seems to have solved the problem. Maybe adding that little tidbit to the docs 9or the error message) might be a good idea?

[davidgs]

I should add that clearing the cache fixed this for yarn create react-app my-project --template typescript The npc version still fails to create a viable project directory.

[Raeka1976]

Thanks

Sent from Outlook for Androidhttps://aka.ms/AAb9ysg

---

From: David G. Simmons @.> Sent: Thursday, December 22, 2022 8:48:16 PM To: facebook/create-react-app @.> Cc: Subscribed @.***> Subject: Re: [facebook/create-react-app] npx create-react-app myproj --template typescript fails on macOS (Issue #12923)

I should add that clearing the cache fixed this for yarn create react-app my-project --template typescript The npc version still fails to create a viable project directory.

— Reply to this email directly, view it on GitHubhttps://github.com/facebook/create-react-app/issues/12923#issuecomment-1363326749, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AXQY2V7RJIT4XERXJ7T7Z73WOS5BBANCNFSM6AAAAAATFYCCRQ. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[justin-tay]

I should add that clearing the cache fixed this for yarn create react-app my-project --template typescript The npc version still fails to create a viable project directory.

If that is the case then I don't really think clearing the npx cache did anything for you. I don't think yarn uses the npx cache. The yarn create command in yarn 1.x is equivalent to installing globally (or updating to latest) and then running it. See https://classic.yarnpkg.com/lang/en/docs/cli/create/. If you run yarn global list you should see that create-react-app should be now installed.

The main issue with npx is that it doesn't update any existing package in the cache to latest. Maybe you can check by running npx create-react-app --version. If npx didn't prompt to install create-react-app then you can check the cache directory by running npm config get cache and the npx cache should be in the _npx subdirectory.

[davidgs]

True. The change from yarn create-react-app to yarn create react-app is likely the cause of the change. the npx version of the command that still fails.

[joemaller]

Find npm's cache: npm config get cache (usually in the home folder: ~/.npm)

npx uses it's own cache in the .npm/_npx subfolder.

rm -rf ~/.npm/_npx will clear the npx-specific cache.