React 프로젝트 생성 오류 (Trouble Shooting)

https://iwoohaha.tistory.com/312 에서 알아본 것과 같이 React 프로젝트를 개발할 환경 구성을 모두 완료

NVM -> Node.js (npm, npx)

하였다면, npx 를 이용하여 React 프로젝트를 생성할 수 있는데,

npx create-react-app <projectname>

위 명령어를 실행시켰을 때 아래와 같이 오류가 발생할 수 있다.

npx create-react-app reactdiary

Creating a new React app in /Users/dbfis/_MyProject/woohahaapps.com/reactdiary.

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


added 1315 packages in 35s

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

Installing template dependencies using npm...
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: reactdiary@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 /Users/dbfis/.npm/_logs/2024-12-09T01_59_07_351Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/dbfis/.npm/_logs/2024-12-09T01_59_07_351Z-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

위 오류 내용은 React 프로젝트 이름으로 reactdiary 를 지정하고 있는데, reactdiary 디렉토리에는 package.json 파일이 생성되어 있을 것이다.

이 파일의 내용을 열어보면

{
  "name": "reactdiary",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cra-template": "1.2.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1"
  },
  ...

과 같이 react 버전이 19.0.0, react-dom 버전이 ^19.0.0, react-scripts 버전이 5.0.1 로 지정되어 있다.

설치된 react 버전이 19.0.0 인데, 의존성 관계에 있는 다른 패키지에서 안정화된 React 18 버전이 요구된다면 위와 같이 충돌이 발생할 수 있다. https://react.dev/versions 에서 확인할 수 있는 최신의 React Version 은 19.0 인데, 2024년 12월에 발표된 것으로 아직 안정적이라고 볼 수 없으므로 2024년 4월에 릴리즈된 18.3.1 버전을 설치하는 것이 권장되므로 아래와 같이 18 버전으로 변경해줄 수 있다.

우선 React 프로젝트 디렉토리로 이동하여 설치되어 있는 react 버전을 확인한다.

cd reactdiary
npm list react

npm install 명령어로 18 버전의 react 와 react-dom 을 설치한다.

npm install react@18 react-dom@18

package.json 파일의 내용을 확인하거나 npm list react 명령을 통해서 react 버전을 확인할 수 있다.

 

이 상태에서 npm start 명령을 이용하여 React 프로젝트를 실행시키면 터미널에는 아래와 같은 오류메시지가 표시되고

웹브라우저에 표시된 페이지에도 아래와 같이 에러 메시지가 표시된다.

src/reportWebVitals.js 파일을 열어보면

const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

3번째 라인에서 import('web-vitals') 가 보이는데, node_modules 디렉토리 아래에 web-vitals 디렉토리가 없는 것도 확인할 수 있다.

아래 스크린샷은 react 19 버전이 발표되기 전에 생성한 react 프로젝트의 node_modules 디렉토리에 web-vitals 패키지가 존재하는 모습이다.

이 오류를 수정하려면 npm 을 이용하여 web-vitals 패키지를 설치하면 된다.

npm install web-vitals

web-vitals 패키지가 설치되고 나면 node_modules 아래에 web-vitals 디렉토리가 생성된 것이 보이게 되고, React 프로젝트를 다시 실행시키면 에러없이 실행되는 것을 확인할 수 있게 된다.