개요

안녕하세요😀
이번 포스팅에서는 업무 진행하면서 같은 라이브러리인데 버전만 다르게 설치되면서 문제가 발생한 경험을 공유해보려고 합니다.

어떤 현상인가요??

하이브리드 작업하면서 rn에서 WebView를 사용하려고 하는데 Webview 컴포넌트를 사용할 수 없다는 에러가 발생하였습니다.

해당 에러 확인해 보면 해당 라이브러리가 설치된 위치가 이상했습니다.
WebView가 import 하는 위치가 node_modules/@types/react-native/node_modules/@types/react/index 로 Depth가 이상해 보였습니다.

실제 해당 위치로 이동하여 버전 확인해보니 저희는 @types/react를 17버전을 사용하는데 설치된 버전을 확인해보니 18.0.9로 설치되어 있었습니다. 좀 쌩뚱맞게 설치된 상황이였습니다.

어떻게 해결했나요??

의심하는 부분은 특정 라이브러리가 설치되면서 종속성으로 가지고 있다고 생각했습니다. 정확한 원인 파악이 필요했습니다. 이렇게 어떤 이유로 라이브러리가 설치됐는지 확인할 때 유용한 명령어가 있습니다. yarn why로 라이브러리가 설치된 이유에 대해서 상세히 보여주는 명령어입니다.

yarn document를 참고하시면 자세한 정보를 얻으실 수 있습니다.

yarn why @types/react

저희는 @types/react에 대해서 알고 싶은 상황이었기에 위와 같은 명령어를 사용하였습니다.

분석시 역시 다른 라이브러리를 설치하면서 @types/react의 버전을 18로 설치하는거였습니다.

이런 경우 아예 중복되는 라이브러리를 설치되지 않게끔 하는 yarn nohoist 속성을 활용하였습니다.

nohoist 는 호이스팅을 통해 종속성의 중복을 제거하는 속성입니다.

해당 속성을 통해 중복을 제거할 수 있도록 디렉토리를 설정해서 해결하였습니다.