[React] Error: can't resolve './reportWebVitals' 문제 해결

React 19가 출시되면서 create-react-app으로 새 프로젝트를 시작할 때마다 자동으로 React 19가 설치되는 것을 발견했다.

하지만 테스팅 라이브러리는 아직 React 19를 지원하지 않고 React 18 버전에서만 작동하도록 설정되어 있기 때문에 문제가 생긴다.

그래서 해결책 두 가지를 정리해보고자 한다.

---

해결책1  : reportWebVitals 제거하기

첫 번째 해결책은 바로 React 19에서 변경된 웹 바이탈스 리포팅 기능을 제거하는 것이다.

 

src/index.js에서 다음 import문과, 하단의 reportWebVitals 함수 호출부를 제거하면 된다!

import reportWebVitals from './reportWebVitals'

reportWebVitals()

🌟 말끔히 해결!!! 🌟

---

해결책2: package.json 버전 수정하고 React 다운그레이드하기

하지만 필자는 여러 라이브러리를 사용하다보니 아직 많은 라이브러리들이 React 19와의 호환성 문제를 겪고 있다는 것을 알게 되었다.

그러다 내린 결정 및 해결책! 바로 필자는 React19가 안정화 될때까지 React 18 버전을 쓰겠다는 것!

(나는 reportWebVitals를 제거하고 싶지 않다는 분 포함 해결책!)

 

맥북의 경우 프로젝트 파일에서 cmd+shift+F 로 19.0.0 을 검색하여 나오는 부분(package.json만 수정해도 된다!)들을 18.2.0 (버전은 18에서 알맞게!) 바꿔주면 된다!

그 후에 꼭 아래 명령어들을 실행해야한다.

npm install
npm install web-vitals

🌟 이렇게 하면 말끄으음히 18버전으로 다운그레이드가 가능하다!! 🌟