エラー内容
発生したエラーは下記の通り。
% npx create-react-app my-new-app Creating a new React app in /Users/username/React/my-new-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... added 1324 packages in 16s 268 packages are looking for funding run `npm fund` for details 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: my-new-app@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. npm error npm error npm error For a full report see: npm error /Users/username/.npm/_logs/2025-01-26T21_38_14_756Z-eresolve-report.txt npm error A complete log of this run can be found in: /Users/username/.npm/_logs/2025-01-26T21_38_14_756Z-debug-0.log `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
エラーの内容としては、依存関係の解決に失敗したとのこと。
一番下の部分で「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」というコマンドが失敗したと記述があります。
後でこの「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」の部分を再実行します。
package.json の修正
途中まで作成された my-new-app ディレクトリに入り、package.json ファイルを修正します。
# package.json
"dependencies": {
"cra-template": "1.2.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-scripts": "5.0.1"
},
上記のように dependencies となっている中の「19.0.0」を「18.0.0」に変更します。
# package.json
"dependencies": {
"cra-template": "1.2.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.1"
},
これでファイルを保存します。
失敗した部分のコマンドを再実行
ターミナル上でも「my-new-app」ディレクトリに移動し、先ほど失敗していた「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」を実行します。
% cd my-new-app % 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 added 47 packages, and changed 4 packages in 6s 272 packages are looking for funding run `npm fund` for details
特にエラーは起きませんでした。
npm start
react を起動します。
% npm start Compiled successfully! You can now view my-new-app in the browser. Local: http://localhost:3000 On Your Network: http://192.168.1.9:3000 Note that the development build is not optimized. To create a production build, use npm run build. webpack compiled successfully
無事に起動できました。