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

프로젝트를 새로 시작하면서 프론트는 리액트로 결정됐다.

그래서 한달만에 다시 리액트 프로젝트 생성하였는데 npx create-react-app 명령어를 실행하니 오류가 발생했다.

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\dud99\AppData\Local\npm-cache\_logs\2025-01-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 옵션을 사용하여 강제 설치하라고 적혀있기도 한데 강제로 하는건 나중에 오류가 생길수도 있을까봐 하지 않았다.

 

그래도 프로젝트가 생성은 되었길래 무작정 실행시켜 봤다.

그랬더니 무시무시한 화면이 떠버렸다.

검색해보니 이러한 오류가 나만 뜬게 아니었다. 최근에 이 오류 관련된 글 작성한 사람들이 꽤 있었다. 그래서 해결방법을 따라했다.

해결방법

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

 

위 명령어를 실행하고 다시 실행했더니 정상적으로 작동이 되었다!