[React] 프로젝트 생성 중 npm 이름 규칙 오류, 종속성 충돌 문제 web-vitals 관련 오류

제가 React 프로젝트 생성 중 실제로 겪었던 문제와 해결 방법을 공유해 보겠습니다.

1. npm 이름 규칙 오류

React 프로젝트를 생성하려고 다음 명령어를 실행했습니다:

npx create-react-app LottoVerse

 

그러나 오류 메시지가 출력되었습니다:

Cannot create a project named "LottoVerse" because of npm naming restrictions: * name can no longer contain capital letters

원인: npm은 프로젝트 이름에 대문자를 허용하지 않습니다.

 

문제해결

npm에서 대문자가 포함된 이름을 허용하지 않기 때문에, 프로젝트 이름을 소문자로 수정해 명령어를 실행했습니다:

npx create-react-app lottoversion

2. 종속성 충돌 문제

프로젝트 이름을 수정해 다시 명령어를 실행했지만, 이번에는 다음과 같은 종속성 충돌 문제가 발생했습니다:

ERESOLVE unable to resolve dependency tree
Found: react@19.0.0
Could not resolve dependency:
peer react@"^18.0.0" from @testing-library/react@13.4.0

 

원인: React 19 버전과 @testing-library/react가 React 18 버전만 지원하는 종속성 충돌로 인해 발생한 문제입니다.

 

문제 해결

React 19는 아직 정식 지원되지 않으므로, React 18 버전으로 다운그레이드해 프로젝트를 생성했습니다:

npx create-react-app lottoversion --scripts-version react-scripts@5.0.1

 

또는, 프로젝트 생성 후 충돌을 해결하기 위해 legacy-peer-deps 옵션을 사용해 종속성을 강제로 설치했습니다:

npm install --legacy-peer-deps

 

3. web-vitals 관련 오류 

프로젝트를 성공적으로 생성한 후 서버를 실행했을 때, 브라우저에서 다음과 같은 오류 화면이 표시되었습니다:

 

Module not found: Error: Can't resolve 'web-vitals' in 'src/reportWebVitals.js'

원인: React의 기본 템플릿에 포함된 web-vitals 패키지가 설치되지 않았거나 누락된 상태였습니다.

 

오류 해결

web-vitals 패키지가 누락된 경우, 아래 명령어를 실행해 추가로 설치했습니다:

npm install web-vitals

 

또는, src/index.js에서 reportWebVitals 호출 부분을 주석 처리하거나 삭제해도 된다고 합니다:

// src/index.js
// import reportWebVitals from './reportWebVitals';

// reportWebVitals();