はじめに
Reactを使ってポートフォリオサイトを作成しようとしていました。
参考にした動画はこちら。
自分の学びと経験を発信することも兼ねて、今回直面したエラーとその対処方法を共有します。
発生した問題
「npx create-react-app」を使ってプロジェクトを初期化しようとした際、以下のエラーが発生しました。
Initialized a git repository.
Installing template dependencies using npm...
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: react-bootstrap-portfolio@0.1.0
npm error Found: react@19.0.0
npm error node_modules/react
npm error react@"^19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from @testing-library/react@13.4.0
npm error node_modules/@testing-library/react
npm error @testing-library/react@"^13.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
エラーの内容
このエラーは、Reactと@testing-library/reactの間の依存関係のコンフリクトにより発生しているようでした。具体的には、プロジェクトがReactのバージョン19.0.0を要求している一方で、@testing-library/reactがバージョン18.0.0を期待しているためです。
対応策
以下の手順で問題を解決しました。
-
エラーを修正するために、以下のコマンドを実行しました。
npm install web-vitals --save -
再度、プロジェクトの作成を試みました。
npx create-react-app react-bootstrap-portfolio
すると、また別のメッセージが表示されました。
The directory react-bootstrap-portfolio contains files that could conflict:
node_modules/
package-lock.json
package.json
public/
src/
Either try using a new directory name, or remove the files listed above.
結果
・「npm start」を入力し起動しなおすと、画面が無事表示されました。
・これで良いのか不安も残りますがひとまず良しとします。
まとめ
今回直面したエラーは、依存関係のバージョン衝突によるものでした。reactを勉強し始めたばかりということもあり、バージョン周りのエラーでつまづくことが多く苦しんでします。この備忘録が他の人の助けになることを祈っております。