npx create-react-appが実行できない

Question

前提・実現したいこと

npx create-react-appをターミナル上で実行し、Reactを使用できるフォルダーを作りたい。

発生している問題・エラーメッセージ

フォルダー自体を作ることができない

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

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

試したこと

• npm uninstall -g create-react-app

　そもそもグローバルにはcreate-react-appは存在しないようです。

npm ERR! code EACCES
npm ERR! syscall rename
<省略>
npm ERR! errno -13

npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed

//　こちらを叩いてもダメでした。
npm ERR! To permanently fix this problem, please run:
npm ERR!   sudo chown -R 501:20 "/Users/[自分の名前]/.npm"

• npx clear-npx-cache

補足情報（FW/ツールのバージョンなど）

• mac
• npm -v
  8.3.1
• node -v
  v16.14.0

追記

エラー文の下の方に

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/[自分の名前]/.npm/_logs/2022-03-05T22_05_16_550Z-debug-0.log

という表記があるので中身をみたところ、

314 error path /Users/[自分の名前]/.npm-global/lib/node_modules/create-react-app
315 error errno -13
316 verbose Error: EACCES: permission denied, mkdir '/Users/[自分の名前]/.npm-global/lib/node_modules/create-react-app'
317 error
317 error Your cache folder contains root-owned files, due to a bug in
317 error previous versions of npm which has since been addressed.

という表記を見つけましたのでこちらの記事の解決方法１を参考にして

 sudo chmod 777 /Users/[自分の名前]/.npm-global/lib
 sudo chmod 777 /Users/[自分の名前]/.npm-global/lib/node_modules

また上記と同じような

422 verbose Error: EACCES: permission denied, symlink '../lib/node_modules/create-react-app/index.js' -> '/Users/[自分の名前]/.npm-global/bin/create-react-app'

というエラーが出たので

 sudo chmod 777 /Users/[自分の名前]/.npm-global/bin/create-react-app

をやってみましたが今度は別の

 EACCES: permission denied, rename '/Users/[自分の名前]/.npm-global/lib/node_modules/npm' -> '/Users/kitajimashihomi/.npm-global/lib/node_modules/.npm-N9ngGUni'

が出てきました。そもそも/Users/kitajimashihomi/.npm-global/lib/node_modulesには権限を与えたのにこのパス以下のファイル、ディレクトリには権限が与えられていないのでしょうか？

この後npx clear-npx-cache,をして npx create-react-app@5.0.0を実行してもエラーメッセージは変わらずです。

Comments

[hoshi-takanori]

node はどうやって入れてますか？

自分は homebrew で入れた node v17.6.0 と npm 8.5.1 (と yarn 1.22.17) ですが、
・npm install -g create-react-app して create-react-app
・npm uninstall -g create-react-app して npx create-react-app
・yarn create react-app
どれも成功しますけど…。

[shihominorth]

私もhomebrewで入れました！

[hoshi-takanori]

homebrew で入れた場合、基本的にユーザー権限で入るので sudo する必要はないんですが、ネットの記事を鵜呑みにして sudo npm install -g 〜 とかしちゃったんでしょうね…。
また、homebrew で入れた場合、定期的に brew update および brew upgrade で更新することが推奨されてます。
(homebrew の入れ方の記事はたくさんあるけど、その先のことまで書いてある記事は少なくて、困ったものです…。)

[shihominorth]

まさに sudo npm install -g をやっちゃいました。。。
もうどうすれば良いのかわからないです。原因がわかっただけでもよかったです。

Answer 1

＞npm ERR! code EACCES
＞npm ERR! Your cache folder contains root-owned files,

おそらくsudoを乱用して書き込めないフォルダーができたんじゃないですか？
ファイル、ディレクトリの所有者を確認してください。

Comments

[shihominorth]

回答ありがとうございます。
<省略>のところは
npm ERR! path /Users/自分の名前/.npm-global/lib/node_modules/npm
npm ERR! dest /Users/自分の名前/.npm-global/lib/node_modules/.npm-N9ngGUni

となっているのですが、こちらの所有者の確認をすれば良いということでしょうか？

[technocore]

一般ユーザでcreate-react-appを実行して、アクセス権関連のエラーが出るディレクトリがあれば確認してください。

[shihominorth]

返信ありがとうございます！

こちらの
https://life-is-miracle-wind.blog.jp/archives/26685397.html

上に載っている方法でユーザーを作り、そのユーザーでログイン？をしてファイル、ディレクトリの所有者を確認するという流れでしょうか？もうちょっと私の方でも調べるのですがユーザーを作った後どうすれば良いのかが、わからないので何かヒントだけでもご教示いただければ幸いです。

[shihominorth]

追加ですが所有者を確認した後何をすれば良いのでしょうか..?追記もしたので確認いただければ嬉しいです！

[technocore]

新規ユーザーを作れとは言っていません。
一般ユーザーとはroot以外のユーザー、つまりあなたのアカウントのことです。
sudoを乱用したためにroot所有者のファイルができてしまい、書き込みエラーが発生しています。

[shihominorth]

早速のご返信ありがとうございます。
お伺いしたいことが2点ございます。

1. そのroot所有者のファイルのパスはどう探すのかご教示いただけますでしょうか？

2. sudo chmod 777 (出来てしまったroot所有者のパス)
を走らせて権限を与えるとこのエラーは直る可能性はございますでしょうか？

当方初心者なので、かなり初歩的なことを質問しているかもしれません。申し訳ございません。お返事いただければ幸いです。

[technocore]

あなたのnodejsの環境は知りません。
homebrewのパッケージでインストールしたのでしょうか？
sudoで作業したら、homebrewの内部にroot環境ができている可能性があります。
とりあえずhomebrew配下の所有者をあなたのアカウントに戻してみてください。

[shihominorth]

ご指摘いただいた通りhomebrewでインストールしました。

chown -R [自分の名前] /usr/local/Homebrew

で所有者を自分にしても何も変わらなかったです。

homebrewは/usr/localの配下にインストールされていると認識しております。上のコマンドを走らせる前に所有者を確認しました。その手順としてls -l /usr/local/Homebrewを走らせたところ、全て自分の名前が所有者のところに表示されておりました。

-rw-r--r-- 1 [自分の名前] admin 207 2 Aug 2021 CHANGELOG.md
-rw-r--r-- 1 [自分の名前] admin 829 2 Aug 2021 CONTRIBUTING.md
-rw-r--r-- 1 [自分の名前] admin 1751 10 Jan 02:58 Dockerfile
-rw-r--r-- 1 [自分の名前] admin 1334 23 May 2019 LICENSE.txt
drwxr-xr-x 7 [自分の名前] admin 224 6 Mar 06:20 Library
-rw-r--r-- 1 [自分の名前] admin 8069 28 Jan 13:42 README.md
-rw-r--r-- 1 [自分の名前] admin 705 10 Jan 02:58 SECURITY.md
drwxr-xr-x 3 [自分の名前] admin 96 10 Jan 02:58 bin
drwxr-xr-x 7 [自分の名前] admin 224 10 Jan 02:58 completions
drwxr-xr-x 70 [自分の名前] admin 2240 6 Mar 06:20 docs
drwxr-xr-x 4 [自分の名前] admin 128 6 Mar 06:20 manpages

あとnodebrewで上でnodeのバージョンを変更したりして使用しているのですがこちらは関係ありますでしょうか？

[technocore]

おかしくなったhomebrewの所有者を元に戻すときは、以下のように実行すると確実です。
再度試してみてください。

sudo chown -R $(whoami) $(brew --prefix)/*

[shihominorth]

ご返信ありがとうございます。
sudo chown -R $(whoami) $(brew --prefix)/*

こちら走らせても
You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

と出てしまいました。もうどうすれば良いかわからないですね.......

[shihominorth]

ls -la /usr/local/Homebrewを走らせたところ、一個だけ
drwxr-xr-x 17 root wheel 544 15 Nov 11:13 ..
権限がrootになっているものがありました。こちらは関係ありそうでしょうか？

Answer 2

解決できました！

npm audit fix --force

こちらを走らせた後

npx crate-react-app@latest [作りたいアプリの名前]

をしたところできました！参考にした記事はこちらです。

stackoverflow.com

アドバイスいただいたお二人が言及されている所有者周りですが、正直今回関係あるかわからないので再度調べます。
technocoreさん、hori-takanoriさんありがとうございました。