node_moduleの依存関係の解決方法

Question

最近、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だけだと同じ過ちを何度も繰り返すので、こういった依存関係のエラーが発生した際、どのように依存関係を紐解いていく(という言葉が適切かはわからないのですが)のでしょうか。方法論というか、なにかベストプラクティスのようなものがあるのでしょうか。

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

Comments

[退会済みユーザー]

nodeのバージョンは安定版?の16.14.0です。nodebrewを使っていくつか他のバージョンも試しましたが全て同じエラーであったため、nodeのバージョンは無関係のように思います。

ググって以下のコマンドも試しましたがエラーでした。
- npm install --legacy-peer-deps

Answer 1

"devDependencies": {
"react": "17.0.20",

こんなバージョンないです。

$ npm search react

NAME  | DESCRIPTION | AUTHOR    | DATE       | VERSION  | KEYWORDS
react | React is a… | =gaearon… | 2021-03-22 | 17.0.2   | react

Comments

[退会済みユーザー]

ご回答いただきましてどうもありがとうございます。
dependenciesとdevdependenciesの差異もよく分からず、重複してreact, react-domが指定されておりました。
お恥ずかしい限りですが、devdependenciesは不要だったので削除し、無事、インストールができました。
上記差異につていなど、初学者ながらにとても勉強になりました。
お礼申し上げます。