❗ 오류
npx create-react-app 명령어를 통해 새 프로젝트를 생성 중 아래와 같은 오류 발생
$ npx create-react-app board-front --template typescript
Creating a new React app in C:\~\board-front.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...
added 1323 packages in 25s
267 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: board-front@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\User\AppData\Local\npm-cache\_logs\~-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\User\AppData\Local\npm-cache\_logs\~-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 @types/jest@^27.0.1 @types/node@^16.7.13 @types/react@^18.0.0 @types/react-dom@^18.0.0 typescript@^4.4.2 web-vitals@^2.1.0 failed프로젝트는 생성되었기에 무시하고 진행하던 중 아래와 같은 오류가 발생
$ npm run start
npm error Missing script: "start"
npm error
npm error Did you mean one of these?
npm error npm star # Mark your favorite packages
npm error npm stars # View packages marked as favorites
npm error
npm error To see a list of scripts, run:
npm error npm run
npm error A complete log of this run can be found in: C:\~.log이는 프로젝트가 덜 생성되어 package.json 파일 내에 start라는 이름의 스크립트가 없기 때문에 발생한 것으로 추측되어 처음 오류부터 해결하기로 결정
✅ 원인
@testing-library/react@13.4.0는 react@18.x를 요구하고 있으나, react@19.x가 설치되었기 때문에 이 버전 간에 호환성 문제 발생
⭕ 해결
# 해당 프로젝트로 이동
cd 프로젝트/
# 현재 React 버전 확인
npm list react
# react와 reac-dom 버전을 18로 변경
npm install react@18 react-dom@18
# react 버전 변경 후, 의존성 문제가 없도록 node_modules를 정리 후 재설치
rm -rf node_modules
npm install
# 프로젝트 실행
npm run start➕ 추가
프로젝트 아래 tsconfig.json 및 src 아래 react-app-env.d.ts 파일이 생성되지 않음
# tsconfig.json 생성하기 위해 bash에 아래 코드 입력
npx tsc --init
# 생성된 tsconfig.json 파일 내 코드 끝에 아래 코드 추가
"jsx": "react-jsx"
/* React 17 이상에서 React.createElement를 자동으로 처리, React 16 이하 버전: "jsx": "react" */
# src 아래에 react-app-env.d.ts 파일 생성
# react-app-env.d.ts에 아래 코드 추가
/// <reference types="react-scripts" />
