

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

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

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

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

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

[code]

    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
    
[/code]

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

[code]

    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!
    
[/code]

**試したこと**  
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にもアップロードして作成していたのですが、今回はローカルで作成しています。

少しでも多くの人の目に止まればと、[teratailでもこの質問を投稿しました](https://teratail.com/questions/312842)
。  
terateilで進展があった際、この投稿にも反映させたいと思います。


CC BY-SA 4.0
2020-12-28T09:10:44.390
72943
2020-12-29T11:35:31.297
2020-12-29T11:35:31.297
3060
43327
question
reactjs npm
npx create-react-appでディレクトリ作成した後にnpm list --depth=0を入力するとエラーが出ます。


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

[code]

    npx create-react-app --use-npm
    
[/code]

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

[code]

    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
    
    
[/code]

のエラーは

[code]

    >npm install -D typescript
    
[/code]

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


CC BY-SA 4.0
2020-12-29T09:25:38.220
72963
2020-12-29T09:25:38.220
43327
72943
answer