【React】「npx create-react-app」の実行時にエラーが起きる場合

#### はじめに
npx create-react-appを実行するとエラーが起きてtesting-libraryとweb-vitalsのインストールが失敗するようになったので、その回避策についての備忘録を記載しました。

参考資料
[Reactのプロジェクト作成でエラーが起きた #error - Qiita](https://qiita.com/Anonymous_A/items/97c9a72f1f95adff696e)


#### ＜事象＞

以下のコマンドを実行してReactアプリのプロジェクトを作成する。	
この例ではプロジェクト名は「sample-project」。	
```js
npx create-react-app {プロジェクトフォルダ名}
```
インストール時に以下の通りエラーが出る。
```
--（省略）--
Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: sample-project@0.1.0
npm ERR! Found: react@19.0.0
npm ERR! node_modules/react
npm ERR!   react@"^19.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR! node_modules/@testing-library/react
npm ERR!   @testing-library/react@"^13.0.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 install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed
```

＜エラーの内容＞	
React19がインストールされたが、インストールしようとしているtesting-libraryのバージョンではReact18が必要で19には対応していないためエラーとなっていて、以下のインストールが失敗したという内容。	
+ @testing-library/jest-dom
+ @testing-library/react
+ @testing-library/user-event
+ web-vitals

実行すると、以下のエラーが出る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579718/a92696cd-bea1-c366-f367-a8dc939c22aa.png)

package.jsonを開くと、dependenciesに「web-vitals」がいない。（インストールに失敗しているので、当然ですが。）

　＜package.jsonファイル＞
　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579718/688a0237-cace-6240-e873-86595cc495bc.png" width="200">

#### ＜対応策＞
＜方法１＞
手動でweb-vitalsをインストールする。

+ 以下のコマンドを入力する。
```js
npm install web-vitals --save
```
+ package.jsonを開くと、dependenciesに「web-vitals」が追加されている。
　＜package.jsonファイル＞
　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579718/17b97934-c892-bb2c-e6ca-957c297d3b03.png" width="200">

・「npm start」を入力し起動しなおすと、表示された。	
 　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579718/af60b937-1ef8-513e-f9aa-60404a8ca91d.png" width="200">


＜方法２＞
➀React18にダウングレード（React18を手動でインストール）する。
参考資料
[【React】Reactのバージョンをダウングレードさせる方法【簡単】 #JavaScript - Qiita](https://qiita.com/tsubasa_k0814/items/d90254c807c7280c2db7)
・以下のコマンドを入力する。
```js
npm install --save react@18.X.X react-dom@18.X.X
```
➁インストールに失敗したバージョンのweb-vitalsを手動でインストールする。
・以下のコマンドを入力する。
```js
npm install web-vitals@2.1.0 --save
```
・package.jsonを開くと、dependenciesの「react」・「react-dom」が18に変更され、「web-vitals」が追加されている。

　＜package.jsonファイル＞
　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579718/da528179-a1d5-805b-5a35-b1d8eeafca6e.png" width="200">

・「npm start」を入力し起動しなおすと、表示された。	
 　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579718/af60b937-1ef8-513e-f9aa-60404a8ca91d.png" width="200">

#### あとがき
方法２より方法１のほうが簡単。
create-react-appでは「testing-library」と「web-vitals」のインストールに失敗しているが、web-vitalsだけ手動でインストールすれば、とりあえず実行時は問題なく動くみたい。

Reactとのバージョンの関係でインストールに失敗したtesting-libraryも以下の通り手動でインストールしたら無事インストールできた。（でも入れなくても動くので使わなければ入れなくてもよさそう。）
「npm install @testing-library/jest-dom --save」
「npm install @testing-library/react --save」
「npm install @testing-library/user-event --save」