[ReactJS] 리액트 web-vitals 오류 해결방법

Module not found : Error: Can't resolve 'web-vitals' in '경로' ERROR in ./src/reportWebVitals.js 5:4-24

Module not found: Error: Can't resolve 'web-vitals' in '경로'

 

 

이 오류는 web-vitals 모듈이 설치되어 있지 않거나 제대로 설치되지 않았을 때 발생한다. web-vitals는 리액트 애플리케이션에서 성능을 측정하기 위한 라이브러리인데 이 라이브러리가 설치되지 않으면 아래와 같은 오류를 띄운다.

 

 

터미널에 뜬 리액트 오류

 

---

 

 

web-vitals 모듈 설치하기

터미널에서 다음 명령어를 실행하여 web-vitals 패키지를 설치한다. web-vitals 가 설치되지 않아서 발생하는 경우가 대부분이므로 대부분 패키지 설치 후 오류가 해결된다.

npm install web-vitals

 

 

설치 후, 다시 애플리케이션을 실행한다.

npm start

 

 

패키지가 이미 설치되어 있는지 확인

node_modules 디렉터리에서 web-vitals가 제대로 설치되었는지 확인한다. 설치되어 있지 않다면 앞서 설명했던 패키지 설치 명령어를 실행하여 설치하면 된다. 설치가 되어 있지만 여전히 문제가 발생하면 node_modules와 package-lock.json 파일을 삭제하고 다시 설치한다.

rm -rf node_modules package-lock.json
npm install

 

 

 

파일 경로 확인

src/reportWebVitals.js 파일의 코드에서 web-vitals를 제대로 임포트하고 있는지 확인한다. 기본적으로 아래와 같은 구조여야 한다.

import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

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;

 

 

캐시 정리

의존성 문제나 캐싱 문제로 인해 오류가 발생할 수도 있다. 다음 명령어로 캐시를 정리한다.

npm cache clean --force
npm install

 

 

 

버전이 최신인지 확인하기

web-vitals와 React의 버전이 호환되지 않을 가능성도 있다. 리액트와 web-vitals 모두 최신 버전을 사용하고 있는지 확인하고, 필요하다면 업데이트한다.

npm install web-vitals@latest
npm install react@latest react-dom@latest

 

---

 

만약 위의 방법으로도 해결되지 않는다면 리액트 프로젝트를 초기화 하는 방법이 있다(정말 최후의 수단이다). 프로젝트를 새로 생성하고 파일을 복사하는 방법도 생각해야 한다.