styled-components 설치 시 unable to resolve dependency tree 오류 해결

1. 오류 상황

react-native 사용 중 styled-components 설치 시 오류 발생 

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react-native-todo@1.0.0
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!   react@"18.1.0" from the root project
npm ERR!   peer react@">= 16.8.0" from styled-components@5.3.6
npm ERR!   node_modules/styled-components
npm ERR!     styled-components@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from react-dom@18.2.0
npm ERR! node_modules/react-dom
npm ERR!   peer react-dom@">= 16.8.0" from styled-components@5.3.6
npm ERR!   node_modules/styled-components
npm ERR!     styled-components@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

 

2. 오류 원인

현재 22년 12월 23일 기준 expo를 통해 프로젝트를 생성하였을 때

프로젝트 폴더 내의 package.json을 보면 아래와 같은 라이브러리가 포함된다.

설치된 react-native@0.70.5의  package.json을 살펴 보면 아래와 같이  react@18.1.0 버전을 피어 종속성으로 하고 있고

설치 하고자 하는 styled-components@5.3.6는 react@">= 16.8.0" 이상을 피어 종속성으로 하고 있다

즉, styled-components@5.3.6는 4년 전 배포된 오래된 유물인 react@16.8.6로 개발된 라이브러리인 것이다.

react

요약: styled-components가 구버전의  react를 사용하여 개발되었다. 

결론:

react를 16 버전으로 내리고 react-native도 0.60 버전으로 다운그레이드하기

or

그냥 무시하고 강제로 설치하기

 

---

※강제 설치

에러 메시지에 나오는 대로 아래와 같이 --force, or --legacy-peer-deps 를 사용해 설치한다

npm i styled-components --force

npm i styled-components --legacy-peer-deps