[react error] create-react-app 시 ERESOLVE unable to resolve dependency tree 호환성 문제

문제

 

 

 

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1315 packages in 1m

261 packages are looking for funding
  run `npm fund` for details

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react-for-beginners2@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\user\AppData\Local\npm-cache\_logs\2024-12-09T15_27_05_416Z-eresolve-report.txt

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

 

creact-react-app으로 프로젝트를 생성하려 했는데

위와 같은 에러가 발생했다.

 

찾아보니 리액트 버전을 19.0.0으로 설치하려했지만

@testing-library/react@13.4.0에서 리액트 버전 ^18.0.0을 요구해서

발생하는 호환성 문제인 듯 했다.

 

일단 에러는 발생했지만 프로젝트 폴더가 만들어진 상태였다.

 

 

 

 

 

해결방법

 

버전을 낮추는 방법을 사용했다.

npm uninstall react react-dom
npm install react@18.2.0 react-dom@18.2.0

 

리액트는 프로젝트 단위로 설치되기 때문에

에러가 발생한 프로젝트 폴더에서

위의 명령어 코드를 사용했다.

 

최종적으로

react-dom을 다운그레이드했다.

 

 

 

      "dependencies": {
        "cra-template": "1.2.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1"
      }

 

이후 index.js를 확인해보면

react-dom의 버전이 18.2.0으로 설정되어있다.

 

---

 

 

React Versions – React

 

아직 19버전이 정식 릴리스가 아니라는 말을 보고

18.2.0으로 다운그레이드 하는 방식을 사용했다.

 

이 방법이 안된다면

 

--legacy-peer-deps 을 사용하여 의존성 충돌 문제를

무시하고 설치하는 방법도 있다고 한다.

 

 

 

 

 

 

Reference

[stack overflow] Problem in installing mui in nextjs project with app router and typescript