Could Not resolve dependency tree 에러

문제의 원인은 React의 버전이 높아서 설치하려는 라이브러리가 따라가지 못하여 발생한 것이다. 에러코드에서 17.0.0으로 안내를 해주고 있기 떄문에 해당 버전에 맞게 다운그레이드 해주면 된다.

 

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

 

--lagacy-peear-deps 는 기존 버전을 다 무시하고 일단 설치하는 명령어이다. react와 react-dom은 서로 의존적인 관계라 하나를 낮추게 될 경우 다른 하나랑 안맞아서 설치가 안되기 때문에 반드시 강제로 설치를 해줘야한다.

 

다운그레이드로 설치를 하고 npm start로 렌더링을 해보면 다음과 같은 오류가 나타난다.

 

Compiled with problems:X

ERROR in ./src/index.js 5:0-40

Module not found: Error: Can't resolve 'react-dom/client' in 'C:\Users\cngjs\Desktop\coding\amazon\src'

 

index.js 파일에서 react-dom/client 모듈을 찾을 수 없기 때문에 발생한 문제다.

 

react-dom/client 는 v18에서 새로 생긴 모듈이다.

React v18 버전부터는 이 모듈을 이용해 DOM을 렌더링 한다.

 

React v18 이전 버전은 다른 모듈(react-dom)을 사용하여 렌더링 한다.

이걸 회귀 시켜주면 된다.

 

// import ReactDOM from 'react-dom/client'; // react v18 버전용
import ReactDOM from 'react-dom';  // react v17 버전용

 

그리고 다시 렌더링을 하게 되면 이러한 에러 메세지가 나타난다.

이것 또한 버전이 맞지 않아서 발생하는 문제로 index.js에서 코드를 아래와 같이 수정해주면 된다.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

 

<출처>

https://curryyou.tistory.com/468

https://stackoverflow.com/questions/46566830/how-to-use-create-react-app-with-an-older-react-version