맥북 os 세콰이어 에서 react 프로젝트 생성 실패 시 해결방법

맥북 os 세콰이어에서 node js 를 설치하고 npm run start 를 실행했더니, 이런 에러 메세지가 나왔었습니다.

 

Failed to compile. Module not found: Error: Can't resolve 'web-vitals' in '/Users/danymac/Desktop/hello_react/src' ERROR in ./src/reportWebVitals.js 5:4-24 Module not found: Error: Can't resolve 'web-vitals' in '/Users/danymac/Desktop/hello_react/src' webpack compiled with 1 error One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because "@babel/plugin-proposal-private-property-in-object" is already in your node_modules folder for unrelated reasons, but it may break at any time. babel-preset-react-app is part of the create-react-app project, which is not maintianed anymore. It is thus unlikely that this bug will ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies to work around this error. This will make this message go away.

 

 

주어진 에러 메시지를 기반으로, 두 가지 문제가 있는 것으로 보입니다.

1. web-vitals 모듈을 찾을 수 없음
2. babel-preset-react-app에서 @babel/plugin-proposal-private-property-in-object를 선언하지 않음

해결 방법

1. web-vitals 모듈 문제 해결

web-vitals 모듈이 package.json에 없거나, node_modules에서 제대로 설치되지 않은 것 같습니다.
아래 명령어를 실행하여 web-vitals를 다시 설치하세요.

 

npm install web-vitals

그리고 다시 실행:

npm start

---

2. @babel/plugin-proposal-private-property-in-object 문제 해결

React 공식 문서에서 babel-preset-react-app은 더 이상 유지보수되지 않는다고 합니다.
이 문제를 해결하려면 해당 패키지를 devDependencies에 추가하세요.

 

npm install --save-dev @babel/plugin-proposal-private-property-in-object

그 후 다시 실행:

npm start

---

추가 조치: node_modules 및 package-lock.json 삭제 후 재설치

위 방법으로 해결되지 않는다면, node_modules 및 package-lock.json을 삭제하고 다시 npm install을 실행하세요.

 

rm -rf node_modules package-lock.json npm install npm start

이 방법으로도 해결되지 않는다면 React 버전이 너무 오래되었을 가능성이 있습니다. 최신 버전으로 프로젝트를 다시 만들 것을 고려해 보세요:

 

npx create-react-app my-new-app

그리고 필요한 파일을 새 프로젝트로 옮기는 것도 하나의 방법입니다.

 

 

이렇게 하면, 아래와 같이 다시 잘 나오게 될겁니다.