はじめに

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

参考資料
Reactのプロジェクト作成でエラーが起きた #error - Qiita

＜事象＞

以下のコマンドを実行してReactアプリのプロジェクトを作成する。
この例ではプロジェクト名は「sample-project」。

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

実行すると、以下のエラーが出る。

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

　＜package.jsonファイル＞
　

＜対応策＞

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

以下のコマンドを入力する。

npm install web-vitals --save

package.jsonを開くと、dependenciesに「web-vitals」が追加されている。
　＜package.jsonファイル＞

・「npm start」を入力し起動しなおすと、表示された。
　

＜方法２＞
➀React18にダウングレード（React18を手動でインストール）する。
参考資料
【React】Reactのバージョンをダウングレードさせる方法【簡単】 #JavaScript - Qiita
・以下のコマンドを入力する。

npm install --save react@18.X.X react-dom@18.X.X

➁インストールに失敗したバージョンのweb-vitalsを手動でインストールする。
・以下のコマンドを入力する。

npm install web-vitals@2.1.0 --save

・package.jsonを開くと、dependenciesの「react」・「react-dom」が18に変更され、「web-vitals」が追加されている。

　＜package.jsonファイル＞
　

・「npm start」を入力し起動しなおすと、表示された。
　

あとがき

方法２より方法１のほうが簡単。
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」