인프런 커뮤니티 질문&답변
작성한 질문수
npx create-react-app . --template typescript 실행 시 에러가 발생합니다.
해결된 질문
작성
·
30
0
npx create-react-app . --template typescript
실행 창 에러
Installing template dependencies using npm...
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: section-final@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\redin\AppData\Local\npm-cache\_logs\2024-12-19T02_04_35_799Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\redin\AppData\Local\npm-cache\_logs\2024-12-19T02_04_35_799Z-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 @types/jest@^27.0.1 @types/node@^16.7.13 @types/react@^18.0.0 @types/react-dom@^18.0.0 typescript@^4.4.2 web-vitals@^2.1.0 failed
로그파일 내용
'Log files:
C:\Users\redin\AppData\Local\npm-cache\_logs\2024-12-19T01_52_08_532Z-debug-0.log
# npm resolution error report
While resolving: section-final@0.1.0
Found: react@19.0.0
node_modules/react
react@"^19.0.0" from the root project
Could not resolve dependency: peer react@"^18.0.0" from @testing-library/react@13.4.0
node_modules/@testing-library/react
@testing-library/react@"^13.0.0" from the root project
Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.
구글검색해보니 react 버전 업데이트로 npx에서 지금 에러가 발생한다고 나오는데 아래와 같이 vite에서 typescript 사용하면 될까요?
D:\01_Study\01_REACT\03_ON E_BITE_TYPE_SCRIPT\02_VsCode_WorkSpace_React\section-final> npm create vite@latest
> npx
> create-vite
√ Project name: ... section-filal
√ Select a framework: » React
√ Select a variant: » TypeScript
Scaffolding project in D:\01_Study\01_REACT\03_ON E_BITE_TYPE_SCRIPT\02_VsCode_WorkSpace_React\section-final\section-filal...
Done. Now run:
cd section-filal
npm install
npm run dev
답변 2
1
안녕하세요 이정환입니다.
아이코..! React 19 릴리즈로 인해 요런 오류가 발생하는군요 🥲
말씀하신대로 vite를 이용해 생성하셔도 됩니다! 크게 다른 부분은 없으니 걱정하실 필요 없어요
그럼에도 만약 CRA로 생성하고 싶으시다면 아래의 AI 인턴의 답변대로 명령어 끝에 의존성 충돌을 무시하고 설치를 강행하는 --legacy-peer-deps 옵션을 붙여 설치하시면 됩니다.
npx create-react-app . --template typescript --legacy-peer-deps
1
안녕하세요, 인프런 AI 인턴입니다. Park YongCheon님.
npx create-react-app을 사용하여 타입스크립트 프로젝트를 생성할 때 발생한 오류는 주로 React 버전 간의 의존성 충돌로 인해 생긴 문제입니다. 특히, react@19.0.0과 @testing-library/react@13.4.0 간의 충돌이 문제가 되어 나타난 것으로 보입니다.
문제 원인 및 해결 방안
- 의존성 충돌 문제 해결:
- 이 문제는 보통 의존성 버전 간의 불일치로 인해 발생합니다. React 19 버전은 아직 릴리즈되지 않았고, 안정적인 React 18 버전을 사용할 것을 권장드립니다.
- 명령어에
--force또는--legacy-peer-deps플래그를 추가하여 강제로 설치할 수 있지만, 이는 잠재적으로 불안정한 패키지 구성을 만들 수 있습니다.
- 이 문제는 보통 의존성 버전 간의 불일치로 인해 발생합니다. React 19 버전은 아직 릴리즈되지 않았고, 안정적인 React 18 버전을 사용할 것을 권장드립니다.
npx create-react-app . --template typescript --legacy-peer-deps
- Vite로 전환:
- Vite는 빠르고 모던한 웹 프로젝트 개발 도구로, React와 TypeScript 환경을 지원합니다. 설치 과정에서 문제를 겪고 있다면, Vite로 전환하는 것도 훌륭한 선택이 될 수 있습니다. 이미 시도하신 바와 같이, Vite를 통해 프로젝트를 생성하면 최신 환경의 구성을 비교적 쉽게 설정할 수 있습니다.
- Vite는 빠르고 모던한 웹 프로젝트 개발 도구로, React와 TypeScript 환경을 지원합니다. 설치 과정에서 문제를 겪고 있다면, Vite로 전환하는 것도 훌륭한 선택이 될 수 있습니다. 이미 시도하신 바와 같이, Vite를 통해 프로젝트를 생성하면 최신 환경의 구성을 비교적 쉽게 설정할 수 있습니다.
npm create vite@latest
cd section-final
npm install
npm run dev
- 로그 파일 클릭 후 점검:
- 에러 메시지 중 언급된 로그 파일을 열어 추가적인 정보나 특정 의존성 충돌 원인을 확인하는 것도 문제 해결에 큰 도움이 될 수 있습니다.
- 에러 메시지 중 언급된 로그 파일을 열어 추가적인 정보나 특정 의존성 충돌 원인을 확인하는 것도 문제 해결에 큰 도움이 될 수 있습니다.
추가 도움이 되는 링크
다음 문서들은 npm이나 Create React App 관련 문제 해결에 도움이 됩니다:
- npm ERESOLVE error 해결하기
- Create React App GitHub issues
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
잘되네요!