react19 관련 오류 해결

pc가 교체되어 자주 쓰던 vscode, git, react 등 재설치했다.
react 플젝 생성 중, 이전 pc에서 못 봤던 오류가 발생해서, 동료의 도움 받아 해결할 수 있었다.

명령어 npx create-react-app my-app 실행 후의 오류:

Installing template dependencies using npm...
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: my-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 C:\Users\***\AppData\Local\npm-cache\_logs\2025-01-09T02_15_00_353Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\***\AppData\Local\npm-cache\_logs\2025-01-09T02_15_00_353Z-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

---

해결 절차:
1, 먼저 플젝 폴더 진입

cd my-app

2, 강제 설치

npm i --force

warn이 엄청 많이 보이나 결과는 정상적으로 나왔다.
다만 에러 하나가 남았다.

...
npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.

added 1323 packages, and audited 1324 packages in 29s

Failed to compile.

Module not found: Error: Can't resolve 'web-vitals' in 'C:\myReact\my-app\src'
ERROR in ./src/reportWebVitals.js 5:4-24
Module not found: Error: Can't resolve 'web-vitals' in 'C:\myReact\my-app\src'

webpack compiled with 1 error

3, 오류문구에서 언급된 web-vitals 설치
대체적으로 빠진 건 빠진 대로 설치해주면 된단다.

npm i web-vitals

성공적 결과:

added 1 package, changed 1 package, and audited 1325 packages in 4s

Compiled successfully!

You can now view my-app in the browser.
Compiled successfully!

You can now view my-app in the browser.
Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3001
  On Your Network:  http://192.168.1.218:3001

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

+) 포트번호 중복으로 새 포트에서 화면 볼 수 있도록
중간 질문의 답변을 y로 선택하면 기존 포트번호에 +1되어 브라우저에서 열린다.
수동으로 포트번호 지정할 일이 없어서 참 편하다.
y가 아닌 n 선택하면 여전히 3000번 포트로 localhost가 열리고, 아무 상관도 없단다.

---

그리고 cmd창에서 react19에서 18로 down-grade했다.

C:\Users\userName>npm install react@18 react-dom@18 react-scripts@5

여전히 warn이 엄청 많이 보이지만, 결과적으로는 성공

added 1322 packages in 2m