[react error] npm start시 Module not found: Error: Can't resolve 'web-vitals' in

 

문제

 

 

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

 

리액트에서

npm start를 했는데 위와 같은 에러가 발생했다.

 

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

프로젝트 폴더의

src 폴더 내에 있는 파일인

index.js를 살펴보면 

web vitals가 코드에서 사용되었다.

 

 

관련 파일은 있지만

 

  "dependencies": {
    "cra-template": "1.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },

 

package.json을 살펴보면

web-vitals에 대한 내용이 없다.

 

 

 

 

 

 

728x90

해결 방법

 

reportWebVitals는

 

성능 측정용으로

앱의 기능이나 실행에는 필수적인 요소가 아니기 때문에

선택적으로 사용하면될 듯하다.

 

 

 

---

 

 

 

방법1 - 사용하는 방법

npm install web-vitals@^2.1.0

web-vitals에 대해 설치를 진행했다.

 

 

 

  "dependencies": {
    "cra-template": "1.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },

 

이후 다시 package.json을 확인해보면

마지막 줄에 추가된 것을 확인할 수 있다.

 

 

 

 

 

방법2 - 사용하지 않는 방법

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
//import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

//reportWebVitals();

 

index.js에서 관련 코드를

주석 처리 또는 삭제 하면된다.

 

 

 

 

 

---

 

 

 

npm start하면

정상적으로 페이지가 로드된 걸 확인할 수 있다.