[React] 라이브러리 설치 에러: ERESOLVE unable to resolve dependency tree

# Could Not resolve dependency tree 에러 해결 방법

 

[문제 상황]

React 개발시,

npm, yarn을 통해 라이브러리를 설치하는데,

아래와 같은 에러코드의 Error가 발생하며 설치가 되지 않는다.

 

 

[에러 코드] 

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!  react@"^18.1.0" from the root project
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from @toast-ui/react-editor@3.1.5

npm ERR! peer react@"^0.14.9 || ^15.3.0 || ^16.0.0" from react-quill@1.3.5

 

 

[문제 원인]

React, React-Dom의 버전이 높아서, 설치하려는 라이브러리가 따라가지 못하기 때문이다.

필자의 경우엔 React v18 환경에서 react-quill, toast-ui 등을 설치할 때 이 문제가 발생했다.

 

 

[해결 방법]

에러 코드에서 친절(?)하게 peer react@"^17.0.1" 로 안내해주고 있다.

=> React와 React-Dom 의 버전을 라이브러리 버전에 맞게 다운그레이드 해주면 된다.

npm install react@^17.0.1 react-dom@17.0.1

* 설치하려는 라이브러리와 호환되는 React, React-Dom 버전을 확인하여 다운그레이드 하자

---

근데 이게 잘 안 될 수도 있다. 아래의 에러코드를 내뱉으며...

 

code ERESOLVE

npm ERR! ERESOLVE unable to resolve dependency tree

npm ERR! 

npm ERR! Found: react-dom@18.1.0

npm ERR! node_modules/react-dom

npm ERR!  peer react-dom@"^18.0.0" from @testing-library/react@13.2.

 

즉, react 와 react-dom이 서로 의존하고 있어서,

하나를 낮추면 다른 하나랑 안 맞아서... 일종의 무한 의존(?) 관계로 인해 설치가 안 되는 것이다.

(설치 순서를 바꿔도 마찬가지다.)

 

이럴 땐 그냥

npm의 강제 설치 옵션으로 설치해주면 된다.

 

--legacy-peer-deps :  기존 버전 다 무시하고 일단 설치.

--force : package-lock.json에 몇가지의 다른 의존 버전들을 추가하면서 설치.

 

npm install react@^17.0.1 react-dom@17.0.1 --legacy-peer-deps

 

---

근데 React v18로 넘어가면서 Dom 렌더링 코드에 변경이 있었다.

그래서 그 이전 버전으로 다운그레이드 하면 아래와 같은 에러가 발생할 수 있다.

 

이건 다음 글에서 정리한다.

(한번에 한가지 주제만! 함수형 블로깅 이라고 할까나...)

[React] 리액트v18 버전 다운 에러 해결 방법 : Cannot find module 'react-dom/client'

---

# 추가 참고사항.

이런식으로 버전을 변경한 React 프로젝트를

GitHub 등의 레퍼지터리에 올려두고, clone/pull 받아서 npm install 하면 아래와 비슷한 에러가 발생할 가능성이 있다.

npm ERR! Conflicting peer dependency: 

npm ERR!   peer react@"^16.8 || ^17.0 || ^18.0"

could not resolve dependency: npm peer react@"^18.0.0" from @testing-library/react@13.2.0

 

해결 방법은 아래 글을 참고하자.

[React] create-react-app 리액트 버전 변경 및 에러 처리 방법