If you enter npm list --depth=0 after creating a directory in the npx create-react-app, you get an error.

Asked 2 years ago, Updated 2 years ago, 71 views

When building a react environment,
npx create-react-app hibiton

by entering the
I tried npm list --depth=0 and got a lot of errors.

So I have two questions.
①Do I get this many errors when I only type npx create-react-app fibiton?Is the preparation of the development environment for react wrong?

exWhat should I do to eliminate errors in extreme and peer dep missing?

Please lend me your wisdom.Please.

Problems/Error Messages you are experiencing

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

Message when creating-react-app hybridon

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/jest-dom @5.11.6
├- @testing-library/[email protected]
├- @testing-library/user-event @12.6.0
├- [email protected]
├- [email protected]
└- [email protected]
info All dependencies
├- @testing-library/[email protected]
├- @testing-library/jest-dom @5.11.6
├- @testing-library/[email protected]
├- @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
├- [email protected]
├- [email protected]
├- [email protected]
├- [email protected]
├- [email protected]
├- [email protected]
├- [email protected]
├- US>[email protected]
├- [email protected]
└- [email protected]
✨ Done in 7.73s.
Removing template package using yarnnpkg...

yarn remove v1.22.10
[1/2] 🗑 Removing module cr-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|>=0.5|>=3.0-dev|>>v3.0-dev|>3.0-dev|>> g0.|
success Uninstalled packages.
✨ Done in 7.22s.

Created git commit.

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

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

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

Weuggest that you begin by typing:

  cd hibiton
  yarn start

Happy hacking!

Tried
The solution to extreme is
To begin with, I wanted to resolve the first error npm ERR!extranious: @babel/[email protected] and
I added @babel/[email protected] to the dependencies in package.json and entered npm install@babel/[email protected] into the terminal, but I got a lot of deprecared errors, so I stopped halfway.

As a solution to peer dep missing
I looked it up myself, but the nuance between the code in the example solution and the code in my error is so different that I don't know what's old.

Supplementary information (for example, FW/Tool version)
Environment
node v14.15.1
npm v6.14.8
By the way, I uploaded it to icoudDrive last time, but this time I created it locally.

I also posted this question on teratail to catch as many people as possible.
I would also like to reflect this post when there is progress in terateil.

reactjs npm

2022-09-30 17:35

1 Answers

I got an answer on another website teratail.
Apparently, if you use yarn and npm, you can't download dependencies.

npx create-react-app --use-npm

The error disappeared by managing all modules in 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]

The error is

>npm install-D typescript

It was resolved by doing .
Thank you so much to everyone who thought about it.


2022-09-30 17:35

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.