はじめに
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」