인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

prince1401님의 프로필 이미지
prince1401

작성한 질문수

처음 만난 리액트(React)

React app 설치 시 문제

해결된 질문

작성

·

493

1

버젼.PNG.webp

위와 같이 노드와 npm 이 을 설치하였습니다. 그리고 나서

PS C:\Users\Kim_Seung_Yeon> npx create-react-app my-app

Creating a new React app in C:\Users\Kim_Seung_Yeon\my-app.

Installing template dependencies using npm...
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: my-app@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\Kim_Seung_Yeon\AppData\Local\npm-cache\_logs\2024-12-10T07_05_37_613Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\Kim_Seung_Yeon\AppData\Local\npm-cache\_logs\2024-12-10T07_05_37_613Z-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

크리에이트 하게되면 위와같은 에러가 뜨네요 ... 어떻게 처리해야 할까요 ?

답변 3

4

Inje Lee (소플)님의 프로필 이미지
Inje Lee (소플)
지식공유자

안녕하세요, 소플입니다.

 

며칠 전 리액트 19 정식 릴리즈로 인해 현재 create-react-app이 제대로 작동하지 않습니다.

일단 아래 명령어를 참고해서 Yarn 설치하고, Yarn을 사용해서 리액트 앱을 생성하고 진행해주세요!

npm install -g yarn
yarn create react-app my-app

 

감사합니다.

0

prince1401님의 프로필 이미지
prince1401
질문자

제가 여러가지 해보고 해결한 것 적어둡니다.

저와 같은 에러가 뜨는 분들은 리액트의 버젼이 호환성에 맞지 않는것입니다.

npx create-react-app my-app
cd my-app
npm install react@18 react-dom@18

이렇게 코딩하시면 정상적으로 될겁니다.

0

안녕하세요, 인프런 AI 인턴입니다.

prince1401님께서 겪고 계신 문제는 React 버전과 @testing-library/react 패키지 간의 의존성 충돌로 보입니다. 이 오류는 React 19.0.0이 설치되어 있지만, @testing-library/react가 React 18.0.0 버전과 호환되기 때문에 발생합니다. 아래의 방법을 통해 해결할 수 있습니다:

1. ‘–force’ 또는 ‘–legacy-peer-deps’ 옵션 사용

이 문제를 해결하기 위해 create-react-app 명령을 실행할 때 --force 또는 --legacy-peer-deps 옵션을 추가할 수 있습니다. 이 방법은 잠재적으로 잘못된 의존성 해결을 강제하기 때문에, 프로젝트의 장기적인 안정성을 보장하지는 않지만 임시 방편으로는 해결할 수 있습니다.

npx create-react-app my-app --legacy-peer-deps

2. 실제 충돌 해결

위 방법보다는 더 지적인 해결책으로, 프로젝트의 package.json 내에서 React 버전을 호환 가능한 버전으로 설정하는 것입니다. react@18.x.x 대신에, react@17.x.x처럼 문제가 발생하지 않는 버전을 설치해 보세요.

관련 자료

아래는 비슷한 상황을 다루고 있는 다른 질문들입니다:

위 URL을 참조하여 다양한 해결 방법을 시도해 보세요. 문제를 해결하는 데 유익할 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

prince1401님의 프로필 이미지
prince1401

작성한 질문수

질문하기