Q&A
コマンドを叩いているディレクトリに node_modules ってのができていたら、一回その中身を削除してみるのもいいかも。npm install などでネット上から手繰り寄せるものだし。
前提・実現したいこと
前回質問をした際、たくさんのお叱りの声を受けて、質問内容についてたくさん反省しました。今回も何か至らない点があればコメントで教えてください。
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にもアップロードして作成していたのですが、今回はローカルで作成しています。
回答ありがとうございます。ディレクトリにnode_modulesはあります。
npx create-react-appでもう一度作成してみます。
追記です。
npx-create-react-appでディレクトリごと作り直したのですが先ほどと状況は変わりません。
m6uさんを参考にnode_moduleだけを削除し、npm installでnode/modulesを再インストールしたところ、extraneousのエラーはなくなり、peer dep missingのエラーだけになりました。
しかし@babel/coreなどはもともとpacage.jsonに記入されていないためダウンロードできていない状況だと思います。
回答1件
0
ベストアンサー
自分のMacでもReactアプリを（ひさしぶりに）作ってみました。
npm listで特にエラーは出ませんでしたね。
◆ Homebrewでnode.jsをインストール
$ node -v v15.5.0 (最新版ですね。ちなみにV14LTSが推奨版) $ npm -v 7.3.0 $ yarn -v 1.22.10
◆ グローバルパッケージは必要最小構成にしました。
$ npm list -g /usr/local/lib ├── create-react-app@4.0.1 └── npm@7.3.0
◆ Reactアプリhibitonを作成
$ npx create-react-app hibiton Creating a new React app in /private/tmp/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 15.43s. 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 8.54s. 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 /private/tmp/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!
◆ hibitonアプリ内に移動してnpm listを実行
$ cd hibiton hibiton $ npm list --depth=0 hibiton@0.1.0 /private/tmp/hibiton ├── @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
◆ hibitonアプリを起動
hibiton $ yarn start Compiled successfully! You can now view hibiton in the browser. Local: http://localhost:3000 On Your Network: http://192.168.1.11:3000 Note that the development build is not optimized. To create a production build, use yarn build.
◆ hibitonアプリのファイル構成
hibiton $ ls -1 .eslintcache .git/ .gitignore README.md node_modules/ package.json public/ src/ yarn.lock
投稿2020/12/28 16:49
総合スコア7225
回答ありがとうございます。解決しました。どうやらnpmとyarn,
二つを使って環境構築をするとエラーが起こるようで、
npx create-react-app --use-npm
でnpmだけを使うことによってエラーがなくなりました。
回答ありがとうございます。
ちなみに私の環境では
--use-npmオプションが
あっても無くてもエラーは出ないです。
根本的な解決はしていない可能性がありますよ。
返信ありがとうございます。
technocoreさんの回答を参考にnpmのバージョンを6.14.8から7.30に変更して作り直した結果、--use-npmを使わずにエラーをなくすことができました。
今回の質問でたくさん勉強になりました。ありがとうございます。
あなたの回答
tips
プレビュー
