0

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

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

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

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

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

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 [email protected]
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 [email protected]
npm ERR! extraneous: @babel/[email protected] /Users/hibitoooon/Documents/App/hibiton/node_modules/@babel/plugin-proposal-class-properties/node_modules/@babel/core
npm ERR! extraneous: @babel/[email protected] /Users/hibitoooon/Documents/App/hibiton/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/node_modules/@babel/core
npm ERR! extraneous: @babel/[email protected] /Users/hibitoooon/Documents/App/hibiton/node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/core
npm ERR! extraneous: @babel/[email protected] /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/[email protected] /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/[email protected] /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/[email protected] /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/[email protected] /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/[email protected] /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/[email protected] /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 [email protected]
npm ERR! extraneous: @babel/[email protected] /Users/hibitoooon/Documents/App/hibiton/node_modules/babel-jest/node_modules/@babel/core
npm ERR! extraneous: [email protected] /Users/hibitoooon/Documents/App/hibiton/node_modules/jest-pnp-resolver/node_modules/jest-resolve

create-react-app hibitonをした際のメッセージ

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 > [email protected]" 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
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  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 > [email protected]" 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/[email protected]" 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/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  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/[email protected]" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" 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!

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

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

補足情報(FW/ツールのバージョンなど)
環境
node v14.15.1
npm v6.14.8
ちなみに前回icloudDriveにもアップロードして作成していたのですが、今回はローカルで作成しています。

少しでも多くの人の目に止まればと、teratailでもこの質問を投稿しました
terateilで進展があった際、この投稿にも反映させたいと思います。

0

1 件の回答 1

1

別サイトteratailで答えが出ました。
どうやらyarnとnpm二つを使うと依存関係がダウンロードできなくなるということが起きており、

npx create-react-app --use-npm

でモジュールを全部npmで管理することによってエラーがなくなりました。

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 [email protected]
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 [email protected]
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 [email protected]

のエラーは

>npm install -D typescript

をすることによって解決しました。
考えてくださった皆さん、本当にありがとうございました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。