create-react-appについて

Question

create-react-appコマンドではなく別のコマンドで実行できる件

実際にエラーが出るコマンド

% create-react-app [アプリ名]

を行うとエラーが発生。エラー内容は以下の通り

zsh: command not found: create-react-app

「そんなコマンドないよ」と言われてしまう。

ここで開発環境を確認

• M1Pro
• OS Monterey
• node (16.13.0)
• npm (8.1.0)
• yarn (1.22.17)

エラーが出るので公式ドキュメントを参考にyarnをつけて実行

% yarn create react-app [アプリ名]

無事アプリの雛形ができる。
なぜ先頭にyarnをつけてcreate-react-appをすることでエラーが出ずに雛形が作れるのか。
自分でも調べたのですが、答えがわからず今回質問させていただきました。

よろしくお願いいたします。

(公式ドキュメント)

補足

npx 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もしくはyarnをアインストールし、別のやり方でもう一度試してくださいとのことでした。
その結果がyarnをつけて実行することで、うまくできたという感じです。

Comments

[hoshi-takanori]

create-react-app をどうやってインストールしたかによりますが、たぶんパスが通ってないのでしょうね。
ま、yarn create で実行できたなら、それで良いのでは…。

[ken0426]

ご指摘ありがとうございます。
確かにyarnで作れるならそれでいいかもしれませんね。
ただ少し気になったので今回質問させていただきました。

Answer 1

M1Mac/Montereyです。
試してみましたが問題ないですね。
create-react-appがどこにインストールされたか確認してください。

$ npm install -g create-react-app
$ create-react-app -V
5.0.0

Comments

[ken0426]

ご回答ありがとうございます！

Answer 2

npxやyarnを使わずに

% create-react-app [アプリ名]

を使いたい場合はcreate-react-appをグローバルスクープでインストールしないといけません

npm install -g create-react-app 
# yarnの場合はyarn global add create-react-app

でcreate-react-appをインストールするえば大丈夫です。

Comments

[ken0426]

ご回答ありがとうございます。
ご指摘通りにコマンドを実行すると、
`npm`の場合だと、エラーが出て

```Terminal
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/create-react-app
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/create-react-app'
npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/create-react-app'] {
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'mkdir',
npm ERR! path: '/usr/local/lib/node_modules/create-react-app'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ken0426/.npm/_logs/2022-01-02T04_08_56_729Z-debug.log
```

`yarn`の場合だと正常に動作しました。
```Terminal
yarn global v1.22.17
[1/4] ???? Resolving packages...
[2/4] ???? Fetching packages...
[3/4] ???? Linking dependencies...
[4/4] ???? Building fresh packages...

success Installed "create-react-app@5.0.0" with binaries:
- create-react-app
✨ Done in 0.20s.
```

しかし、`create-react-app [アプリ名]`では同じように`zsh: command not found: create-react-app`と表示され作ることはできませんでした。

[wasd0109]

npmのエラーは権限によるものでこちらの記事を参考してみてください。
https://zenn.dev/ikeo/articles/8d0c88dcedf256b09f73

Yarnに関してはPATHに追加しないといけないので、.bashrcに export PATH="$(yarn global bin):$PATH" を追加してみてください

[ken0426]

ありがとうございます！
npmのやり方で無事できました！！