npx create-react-app 디렉토리이름 (react 설치 에러 문제)

npx create-react-app 디렉토리이름

명령어로 react를 설치하려고 한다.

그런데 다음과 같이 에러가 발생했다.

taekgyu@taekgyuui-MacBookAir test-app % npx create-react-app .     

Creating a new React app in /Users/taekgyu/devProject/lecture/reactStudy/test-app.

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


added 1324 packages in 5s

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

Initialized a git repository.

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: test-app@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! /Users/taekgyu/.npm/_logs/2025-01-17T12_29_12_879Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/taekgyu/.npm/_logs/2025-01-17T12_29_12_879Z-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
taekgyu@taekgyuui-MacBookAir test-app %

 

해당 에러는 create-react-app을 사용하여 새로운 React 앱을 생성하는 과정에서 의존성 충돌이 발생했다.

원인

create-react-app은 기본적으로 react@19 버전을 설치하려고 했다.

그러나 @testing-library/react는 react@18 버전을 요구하는데, 두 버전 간에 충돌이 발생했다. 이로 인해 npm ERR! ERESOLVE unable to resolve dependency tree 에러가 발생했다.

 

해결 방법

npm install react@18 react-dom@18 명령어를 사용하여 react와 react-dom을 18 버전으로 강제로 설치하면서 충돌을 해결할 수 있다.

즉, 처음 상황에서 다음과 같이 npm install react@18 react-dom@18 명령어를 실행한다.

taekgyu@taekgyuui-MacBookAir my-app % npm install react@18 react-dom@18

changed 4 packages, and audited 1325 packages in 968ms

267 packages are looking for funding
  run npm fund for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run npm audit for details.

 

설치 후 8개의 취약점 경고가 나타났으며,

이를 해결하려면 npm audit fix --force 명령어를 사용하여 패키지의 취약점을 해결할 수 있다.

취약점 중 일부는 높은 위험을 포함하고 있으므로, 향후 이를 해결하는 것이 좋다.

 

이렇게 하여 의존성 충돌 문제를 해결했다.

 

참고 문서

https://www.inflearn.com/community/questions/1457785/react-app-%EC%84%A4%EC%B9%98-%EC%8B%9C-%EB%AC%B8%EC%A0%9C?focusComment=385887