[React] npx create-react-app으로 프로젝트 생성 시 발생하는 @testing-library/react 호환 문제 (Feat. React 19)

오랜만에 npx create-react-app으로 react 프로젝트를 생성하였는데 아래와 같은 에러 코드를 뱉어냈다.

 

에러 코드

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: culand@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 ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\yms\AppData\Local\npm-cache\_logs\2024-12-17T07_34_41_564Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\yms\AppData\Local\npm-cache\_logs\2024-12-17T07_34_41_564Z-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

 

주요 내용을 살펴보면 npx create-react-app으로 프로젝트 생성 시 설치되는 @testing-library/react@13.4.0 패키지는

react@^19.0.0와 호환되지 않아 react@^18.0.0 버전을 사용하라고 한다. 그것이 아니면 --force 또는 --legacy-peer-deps 옵션을 사용하여 강제 설치하라고 하는데 강제 설치의 쓴맛을 본 적이 있어 충돌이 생기지 않을 거라는 확신이 있지 않는 이상 웬만하면 추천하지 않는다.

 

 

에러는 발생하였어도 필수 패키지가 아니라 프로젝트는 정상적으로 생성되었는데 package-lock.json을 확인해 보니 react와 react-dom이 현재 최신 버전인 19.0.0 버전으로 설치된 걸 확인할 수 있었다.

현재 상태에서 npm start로 프로젝트를 실행 해보니

 

 

web-vitals 패키지도 설치가 누락되어있다.

 

 

해결 방법

 

react, react-dom을 18 버전으로 다운그레이드, react 18과 호환되는 버전의 @testing-library/react, web-vitals 패키지 설치

npm install react@18 react-dom@18 @testing-library/jest-dom@5.17.0 @testing-library/react@13.4.0 @testing-library/user-event@13.5.0 web-vitals

 

위 패키지들을 설치하여 해결!

 

react 19 업그레이드 가이드에서는 react-test-render 대신 @testing-library/react 사용을 권장한다고 되어있는데 아직

불안정 한 것인지 무슨 이유 때문에 호환되지 않는지 정확히 알 수는 없었다. 이 같은 버전 충돌 문제가 발생하지 않도록 협업 간에도 적절한 버전을 선택하여 프로젝트를 진행하는 것이 중요하겠다.

 

🗒️ 리액트 19 업그레이드 가이드

React 19 Upgrade Guide – React