npx-create-react-appでディレクトリ作成後、npm list --depth=0でエラーが発生する。

Question

前提・実現したいこと

前回質問をした際、たくさんのお叱りの声を受けて、質問内容についてたくさん反省しました。今回も何か至らない点があればコメントで教えてください。

reactの環境構築をする際、
npx create-react-app hibiton(作りたいファイル名)
を入力して、
npm list --depth=0をしたところ、エラーがたくさん出ました。

そこで皆さんに聞きたいことが2つあります。
①現在npx creat-react-app hibitonしか入力していないのにこんなにエラーが出ることはあるのでしょうか？そもそものreactの開発環境準備が間違っているのでしょうか？

②extraneousとpeer dep missingのエラーをなくすにはどうしたら良いでしょうか？

皆さんの知恵をお貸しください。お願いします。

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

npm ERR! extraneous: @babel/core@7.12.3 /Users/hibitoooon/Documents/App/hibiton/node_modules/@babel/plugin-transform-react-display-name/node_modules/@babel/core
npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta, required by tsutils@3.17.1
npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta, required by tsutils@3.17.1
npm ERR! extraneous: @babel/core@7.12.3 /Users/hibitoooon/Documents/App/hibiton/node_modules/@babel/plugin-proposal-class-properties/node_modules/@babel/core
npm ERR! extraneous: @babel/core@7.12.3 /Users/hibitoooon/Documents/App/hibiton/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/node_modules/@babel/core
npm ERR! extraneous: @babel/core@7.12.3 /Users/hibitoooon/Documents/App/hibiton/node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/core
npm ERR! extraneous: @babel/core@7.12.7 /Users/hibitoooon/Documents/App/hibiton/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-numeric-separator/node_modules/@babel/core
npm ERR! extraneous: @babel/core@7.12.7 /Users/hibitoooon/Documents/App/hibiton/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-optional-chaining/node_modules/@babel/core
npm ERR! extraneous: @babel/core@7.12.7 /Users/hibitoooon/Documents/App/hibiton/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx/node_modules/@babel/core
npm ERR! extraneous: @babel/core@7.12.7 /Users/hibitoooon/Documents/App/hibiton/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx-development/node_modules/@babel/core
npm ERR! extraneous: @babel/core@7.12.7 /Users/hibitoooon/Documents/App/hibiton/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx-self/node_modules/@babel/core
npm ERR! extraneous: @babel/core@7.12.7 /Users/hibitoooon/Documents/App/hibiton/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx-source/node_modules/@babel/core
npm ERR! extraneous: @babel/core@7.12.7 /Users/hibitoooon/Documents/App/hibiton/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-pure-annotations/node_modules/@babel/core
npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta, required by tsutils@3.17.1
npm ERR! extraneous: @babel/core@7.12.3 /Users/hibitoooon/Documents/App/hibiton/node_modules/babel-jest/node_modules/@babel/core
npm ERR! extraneous: jest-resolve@26.6.0 /Users/hibitoooon/Documents/App/hibiton/node_modules/jest-pnp-resolver/node_modules/jest-resolve

該当のソースコード

npx create-react-app

試したこと

extraneousの解決方法として
手始めに最初のエラーnpm ERR! extraneous: @babel/core@7.12.3 を解決したいと思い、
@babel/core@7.12.3をpacage.jsonのdependenciesに追加して、npm install @babel/core@7.12.3をターミナルに入力したのですが、deprecaredエラーがたくさん出てしまい、途中でやめてしまいました。

peer dep missingの解決方法として
自分で調べてみたのですが、解決方法の例のコードと自分のエラーのコードのニュアンスが違いすぎて何がどう古いのかわからない状態です。

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

環境
node v14.15.1
npm v6.14.8
ちなみに前回icloudDriveにもアップロードして作成していたのですが、今回はローカルで作成しています。

この投稿はstack overflowでも行っています。
あちらで進展が会った際こちらの投稿にも反映させたいと思います。

Comments

[hoshi-takanori]

謎すぎますね。ご質問の答えとしては、① 普通はそんなにエラーは出ません。② 個別にエラーを修正して何とかなる状況には見えませんので、根本的な原因を突き止める必要があるかと思います。

とりあえず以下の点を教えてもらえませんか？
・macOS のバージョンはいくつですか？
・セキュリティやウィルス対策的なソフトは何かお使いでしょうか？
・確認ですが、システム環境設定で iCloud Drive の「デスクトップ」と「書類」を無効にしたということですよね？
・hibiton フォルダに package-lock.json または yarn.lock というファイルは存在しますか？
・npx create-react-app hibiton を実行した際に出力されたメッセージが残っていたら貼り付けてください。

ちなみに、私のマシンで npx create-react-app my-app した後に npm list --depth=0 を実行した結果は以下のとおりです。(もちろん、エラーは出てません。)

my-app@0.1.0 /Users/hoshi/Documents/App/my-app
├── @testing-library/jest-dom@5.11.6
├── @testing-library/react@11.2.2
├── @testing-library/user-event@12.6.0
├── react-dom@17.0.1
├── react-scripts@4.0.1
├── react@17.0.1
└── web-vitals@0.2.4

[bicLighter]

返信ありがとうございます。
・OSは10.15.7
・セキュリティソフトは使用していません。
・そうです。無効にしました。
・はい、yarn.lockとpackage-jsonは存在します。

こちらがnpx create-react-appを実行した際のメッセージです。
hibitoooon@Atom App % npx create-react-app hibiton

Creating a new React app in /Users/hibitoooon/Documents/App/hibiton.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.22.10
[1/4] ???? Resolving packages...
[2/4] ???? Fetching packages...
[3/4] ???? Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] ???? Building fresh packages...
success Saved lockfile.
success Saved 6 new dependencies.
info Direct dependencies
├─ cra-template@1.1.1
├─ react-dom@17.0.1
├─ react-scripts@4.0.1
└─ react@17.0.1
info All dependencies
├─ cra-template@1.1.1
├─ react-dev-utils@11.0.1
├─ react-dom@17.0.1
├─ react-scripts@4.0.1
├─ react@17.0.1
└─ scheduler@0.20.1
✨ Done in 22.70s.

Initialized a git repository.

Installing template dependencies using yarnpkg...
yarn add v1.22.10
[1/4] ???? Resolving packages...
[2/4] ???? Fetching packages...
[3/4] ???? Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning " > @testing-library/user-event@12.6.0" has unmet peer dependency "@testing-library/dom@>=7.21.4".
[4/4] ???? Building fresh packages...
success Saved lockfile.
success Saved 17 new dependencies.
info Direct dependencies
├─ @testing-library/jest-dom@5.11.6
├─ @testing-library/react@11.2.2
├─ @testing-library/user-event@12.6.0
├─ react-dom@17.0.1
├─ react@17.0.1
└─ web-vitals@0.2.4
info All dependencies
├─ @testing-library/dom@7.29.0
├─ @testing-library/jest-dom@5.11.6
├─ @testing-library/react@11.2.2
├─ @testing-library/user-event@12.6.0
├─ @types/aria-query@4.2.0
├─ @types/jest@26.0.19
├─ @types/testing-library__jest-dom@5.9.5
├─ css.escape@1.5.1
├─ css@3.0.0
├─ dom-accessibility-api@0.5.4
├─ lz-string@1.4.4
├─ min-indent@1.0.1
├─ react-dom@17.0.1
├─ react@17.0.1
├─ redent@3.0.0
├─ strip-indent@3.0.0
└─ web-vitals@0.2.4
✨ Done in 7.73s.
Removing template package using yarnpkg...

yarn remove v1.22.10
[1/2] ???? Removing module cra-template...
[2/2] ???? Regenerating lockfile and installing missing dependencies...
warning " > @testing-library/user-event@12.6.0" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
success Uninstalled packages.
✨ Done in 7.22s.

Created git commit.

Success! Created hibiton at /Users/hibitoooon/Documents/App/hibiton
Inside that directory, you can run several commands:

yarn start
Starts the development server.

yarn build
Bundles the app into static files for production.

yarn test
Starts the test runner.

yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd hibiton
yarn start

Happy hacking!

[hoshi-takanori]

確認ありがとうございます。create-react-app では yarn が使われていますね。yarn はインストールしてますか？ (もしかしたら yarn をインストールしてなくても、勝手に create-react-app が拾ってきて使うのかも…。)

create-react-app では yarn が使われてるのに、その後は npm をお使いになってますよね。yarn と npm ではパッケージ管理方針が微妙に違う (と理解してるけど、詳細は知らない…) ので、create-react-app では yarn を使ったならその後のパッケージ追加にも yarn add を使うべきだし、npm を使いたいなら create-react-app の時に --use-npm オプションを指定する必要があります。

(私が使っていた npm は v7.3.0 で、それだとエラーが出ないので気づきませんでしたが、試しに npm v6.14.8 を入れて npm list --depth=0 してみたら、npm ERR! extraneous が 10 個くらい出ました。)

[bicLighter]

hoshi-takanoriさん返信ありがとうございます。
hoshiさんのおっしゃる通り
```
npx create-react-app --use-npm
```
でextraneousなどのエラーはほとんど治り、
peer dep missingはMellbrotherさんの助言で治りました。
```
>npm install -D typescript
```
やはりnpmとyarn、両方使っての環境構築がいけなかったみたいです。
本当にありがとうございました。

[bicLighter]

Mellbrotherさん、hoshi-takanoriさん、本当にありがとうございました。
Mellbrotherさんには悪いのですが、
今回のベストアンサーはhoshi-takanoriさんにしたいと思います。
hoshi-takanoriさん回答お願いします。

[hoshi-takanori]

問題解決してよかったです。ベストアンサーは Mellbrother さんで良いのでは。

[bicLighter]

了解です。ありがとうございました。

Answer 1

自分のパソコンを使い実験をしてみました。
reactについては私もあまり詳しくないので、自分の環境でやった場合に
どうなるかを書いてみました。参考になれば幸いです。

node: v12.16.1
npm: 6.13.4

---

①についての回答
bicLighterさんとは違い、extraneousのエラーは出ませんでした。
peer dep missingについてはtypescriptのところでエラーが出ています。

>npx create-react-app my-app
>npm list --depth=0
+-- @testing-library/jest-dom@5.11.6
+-- @testing-library/react@11.2.2
+-- @testing-library/user-event@12.6.0
+-- react@17.0.1
+-- react-dom@17.0.1
+-- react-scripts@4.0.1
`-- web-vitals@0.2.4

npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 
3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta, required by tsutils@3.17.1
npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 
3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta, required by tsutils@3.17.1
npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 
3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta, required by tsutils@3.17.1

---

②についての回答
typescriptのpeer dep missingについては次のコードで解決できました。

>npm install -D typescript // -Dは--save-devと同じ
>npm list --depth=0
+-- @testing-library/jest-dom@5.11.6
+-- @testing-library/react@11.2.2
+-- @testing-library/user-event@12.6.0
+-- react@17.0.1
+-- react-dom@17.0.1
+-- react-scripts@4.0.1
+-- typescript@4.1.3
`-- web-vitals@0.2.4

>

extraneousのエラーについては--saveオプションをつけてインストールすれば解決するかもしれません。

npm install "パッケージ" --save (または--save-dev)

Comments

[bicLighter]

回答ありがとうございます。
hoshi-takanoriさん,Mellbrotherの助言により、
npx-create-react-app --use-npm
でextraneousのエラーは全部解決しました。
peer dep missingのエラーはmellbrotherさんの助言がなければ解決できませんでした。本当にありがとうございます。