npm installした際に、"ERESOLVE unable to resolve dependency tree"の解決方法



<h1>前置き</h1>
新しくインストールしようとするライブラリ（新ライブラリ）と、今までインストールしているライブラリ（旧ライブラリ）に対して、
親ライブラリが必要としているライブラリに対して、旧ライブラリが差異があるため、インストールができません、というエラー。

<h1>エラー内容</h1>
Expo v45.0.0 -> v46.0.0にアップグレードした後、npm installしたら、次のnpmの依存関係のエラーが発生。

```java
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"18.0.0" from the root project
npm ERR!   peer react@"*" from @react-navigation/bottom-tabs@6.5.2
npm ERR!   node_modules/@react-navigation/bottom-tabs
npm ERR!     @react-navigation/bottom-tabs@"^6.0.7" from the root project
npm ERR!   31 more (@react-navigation/native, react-native, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-stately/checkbox@3.0.3
npm ERR! node_modules/native-base/node_modules/@react-stately/checkbox
npm ERR!   @react-stately/checkbox@"3.0.3" from native-base@3.4.25
npm ERR!   node_modules/native-base
npm ERR!     native-base@"^3.4.3" 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 [Project Root]/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     [Project Root]/.npm/_logs/2022-12-24T08_55_51_874Z-debug.log
```

<h1>エラー内容</h1>

まず上から行くと、旧ライブラリ情報が来ます。react@18.0.0が現在のバージョン情報。
```java
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"18.0.0" from the root project
npm ERR!   peer react@"*" from @react-navigation/bottom-tabs@6.5.2
npm ERR!   node_modules/@react-navigation/bottom-tabs
npm ERR!     @react-navigation/bottom-tabs@"^6.0.7" from the root project
npm ERR!   31 more (@react-navigation/native, react-native, ...)
```
次に、親ライブラリ情報が来ます。
2行目では、__@react-stately/checkbox@3.0.3__ が __react@"^16.8.0 || ^17.0.0-rc.1"__ を必要としてます。
ここで親ライブラリが必要としているライブラリ（react@"^16.8.0 || ^17.0.0-rc.1）に対して、
旧ライブラリ（react@18.0.0）が差異があることがわかります。

3~4行目では、　__@react-stately/checkbox@3.0.3__　がどこから来たのかを示しています。
__native-base@3.4.25__　から __@react-stately/checkbox@3.0.3__　が来ているようです。

そのため、解決方法としては、下記が考えられます。
　① インストールしようとしている新ライブラリを変更する
   native-baseをreact@18.0.0に対応したバージョンにする
　② 旧ライブラリのverを変更する
　　　　　　reactをnative-baseに対応したバージョンにする(react@"^16.8.0 || ^17.0.0-rc.1")
　③ エラーは無視して、新ライブラリをインストールする
　　　　　native-base@"^3.4.3をインストールしてみて、使えるか試す。

参考）[peerDependencies](https://penpen-dev.com/blog/peerdependencies-toha/)

```java
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-stately/checkbox@3.0.3
npm ERR! node_modules/native-base/node_modules/@react-stately/checkbox
npm ERR!   @react-stately/checkbox@"3.0.3" from native-base@3.4.25
npm ERR!   node_modules/native-base
npm ERR!     native-base@"^3.4.3" from the root project
```

<h1>解決方法</h1>

<h3>①インストールしようとしている新ライブラリを変更する</h3>
native-baseをreact@18.0.0に対応したバージョンにしてみようとしましたが、
native baseでは現在はreact@18.0.0に対応してませんでした。

参考）
https://github.com/GeekyAnts/NativeBase/issues/5308
https://github.com/GeekyAnts/NativeBase/issues/5075
https://github.com/GeekyAnts/NativeBase/issues/5543

<h3>② 旧ライブラリのverを変更する</h3>

react@18.0.0を使いたく、Expo SDK 45 -> 46にしたことが元々だったので、
本来の目的から外れるので、選択肢からは除去。試すのであれば以下。

```diff_javascript
-  "react": "18.0.0",
-  "react-dom": "18.0.0",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
```

参考）
https://blog.expo.dev/expo-sdk-46-c2a1655f63f7

<h3>③　エラーは無視して、新ライブラリをインストールする</h3>

npm v7以前では、このように一旦インストールした後に、alertを出すやり方だったようです。
一旦解決ですが、力技なので、native-baseの挙動が問題あるか、見ていくことになります。
```
$ npm install --legacy-peer-deps
```

実行した後は、このようにalertが出ます。

```
$ npx expo start
Starting project at /Users/[Project Root]
Some dependencies are incompatible with the installed expo version:
  react@17.0.2 - expected version: 18.0.0
  react-dom@17.0.2 - expected version: 18.0.0
Your project may not work correctly until you install the correct versions of the packages.
Install individual packages by running npx expo install react@18.0.0 react-dom@18.0.0
```

<h1>参考</h1>

https://qiita.com/masato_makino/items/06011fcecc91be583636

https://qiita.com/koh97222/items/c46d1ef2a63b92bb6c15

https://zenn.dev/osushi02/scraps/721829f3a0c673