[React/CRA] CRA로 react 설치 후 의존성 문제에 대한 경고가 뜨는 경우(렌더 시 bebel dependencies 오류 메시지 발생)

들어가며, 

react로 반응형 웹을 만들어 보려고 cra를 이용해 리액트 프로젝트를 시작했다. 

타입스크립트와 기본적인 것들을 설치했는데 이런 경고가 장황하게 떴다. 대충 바벨에 관련해서 말하는 것 같았다.

 

경고문구 발생 

해당 경고 문구! 

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.

 

대충 해석하자면, babel-preset-react-app 중 하나의 종속성인 '@babel/plugin-proposal-private-property-in-object' 패키지가 공식적으로 의존성 목록에 선언되지 않았음에도 불구하고 가져오고 있다고 되어있다. 이러한 경고에도 불구하고 코드는 잘 작동하지만 다른 의존성에 의해 설치되어있는 것으로 추정되어 안정적이거나 신뢰성이 있는 상황은 아니다. 라고 말한다.

 

따라서, 잠재적인 문제를 방지하기 위해 프로젝트의 'devDependencies'에 명시적으로 추가해주는 것이 좋다고 권장한다. 이렇게 하면 다른 의존성에 의해 이미 'node_modules'에 존재하더라도 명시적으로 개발 의존성 목록에 나타난다고 한다.

 

찾아보니 해당 오류는 CRA 환경을 지원하지 않는 일부 라이브러리를 설치했을 경우 발생하거나, npm과 creat-react-app의 버전 호환성으로 인한 충돌의 문제일 수 있다고 한다.

 

문제 해결하기

1. 해당 패키지 설치하기

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

 

위의 명령어를 통해서 설치해주면 해당 패키지가 명시적으로 프로젝트의 개발 의존성으로 추가되어 다시 렌더링 했을 때 경고가 사라진다.

 

2. npm 최신 버전 업그레이드 후 프로젝트 생성하기

npm install -g npm@latest
npx creat-react-app <project name>

 

npm이 최신 버전이 아닌 경우 dependency의 이유로 앱이 동작하지 않을 수 있으니 최신버전을 잘 유지해주는 것이 좋겠다.

추가적으로, 예전에 node.js와 npm 최신버전 업데이트 하는 방법을 글로 써두었으니 참고하실 분들은 참고하세요!

만약 맥 유저분들은 설치하다 오류가 난다면 'sudo' 를 붙이고 명령어를 실행해보시길 바랍니다. 

https://hayeonn.tistory.com/90

[Node.js] 노드 버전 변경 안될 때 해결법 (Mac에서 Node.js, NPM 업데이트하기)