質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

node_moduleの依存関係の解決方法

okazaki0608
okazaki0608

総合スコア71

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0評価

0クリップ

499閲覧

投稿2022/02/28 08:38

最近、Reactでアプリを開発はじめました。
PythonやFlutterなどは数年の経験がありますが、Javascript・React歴は2ヶ月程度のド素人です。

アプリ開発はcode-sandboxで行っていて、プロトタイプとしてある程度、実装が進んだ段階でローカルにコードをDLし、create-react-appコマンドで雛形を作った後にcode-sandboxからDLしたコード一式を雛形として作成したアプリディレクトリのなかにコピペしました。

ディレクトリ構成

  • README.md
  • node_modules
  • package.json
  • public
  • src

package.json

"name": <アプリ名>, "version": "1.0.0", "description": "", "keywords": [], "main": "src/index.tsx", "dependencies": { "@barusu-react/icons": "0.1.0", "@chakra-ui/icons": "1.1.1", "@chakra-ui/react": "1.8.1", "@emotion/react": "11.7.1", "@emotion/styled": "11.6.0", "axios": "0.26.0", "create-chakra-icons": "1.0.4", "framer-motion": "4.1.17", "react": "16.8.0", "react-dom": "17.0.2", "react-icons": "4.3.1", "react-router-dom": "6.2.1", "react-scripts": "4.0.3" }, "devDependencies": { "react": "17.0.20", "react-dom": "17.0.9", "typescript": "4.4.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ] }

この状態でアプリのルートディレクトリに移動してnpm installすると以下の依存関係のエラーが発生しました。

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <アプリ名> npm ERR! Found: react@undefined npm ERR! node_modules/react npm ERR! dev react@"17.0.20" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^17.0.1" from @barusu-react/icons@0.1.0 npm ERR! node_modules/@barusu-react/icons npm ERR! @barusu-react/icons@"0.1.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /Users/HOME/.npm/eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! /Users/HOME/.npm/_logs/2022-02-28T07_20_00_997Z-debug-0.log

ご質問

  1. ド直球ですが、この依存関係のエラーをどのように解消すればよいのでしょうか
  2. 1だけだと同じ過ちを何度も繰り返すので、こういった依存関係のエラーが発生した際、どのように依存関係を紐解いていく(という言葉が適切かはわからないのですが)のでしょうか。方法論というか、なにかベストプラクティスのようなものがあるのでしょうか。

稚拙な質問で恐縮ですが、何かしら問題解決にヒントをいただけますと幸いです。
よろしくお願い致します。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

okazaki0608

2022/02/28 09:13

nodeのバージョンは安定版?の16.14.0です。nodebrewを使っていくつか他のバージョンも試しましたが全て同じエラーであったため、nodeのバージョンは無関係のように思います。 ググって以下のコマンドも試しましたがエラーでした。 - npm install --legacy-peer-deps

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。