npm install peer dependency 오류 해결

npm install 명령어를 통해 모듈을 설치할 때, 간혹 아래와 같이 peer dependency 오류가 발생하는 경우가 있다.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: chart-samples@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@">= 16.14.0 < 18.0.0" from @nivo/core@0.79.0
npm ERR! node_modules/@nivo/core
npm ERR!   @nivo/core@"^0.79.0" from the root project
npm ERR!   peer @nivo/core@"0.79.0" from @nivo/calendar@0.79.1
npm ERR!   node_modules/@nivo/calendar
npm ERR!     @nivo/calendar@"^0.79.1" from the root project
npm ERR!   1 more (@nivo/tooltip)

이는 npm 7 버전에서 발생하는 오류인데, 모듈에서 요구하는 react의 버전과 현재 내 프로젝트의 react 버전이 맞지 않아서 발생한다.

처음에는 그냥 npm install '모듈명' 명령어 뒤에 --force 를 붙여서 충돌을 우회하거나, --legacy-peer-deps를 붙여서 peer dependencies를 무시하고 설치하도록 했다. 그러나 모듈이 제대로 실행이 되지 않는 경우가 있었고, 결국 아래의 방법을 통해서 react의 버전을 맞춰주었다.

1. 라이브러리 모듈 삭제

• package-lock.json 파일 삭제
• node_modules 폴더 삭제

2. package.json 파일 수정

나는 리액트 18.2.0 버전을 17.0.2 버전으로 다운그레이드했다.
여기서, react와 react-dom의 버전이 일치해야 한다.
또한, React 18 미만의 버전은 test library의 버전도 다운그레이드해야 한다.
React 17 버전은 testing-library 13 버전이 호환되지 않기 때문에 @testing-library/react와 @testing-library/user-event의 버전을 12.0.0 으로 맞춰주었다.

"dependencies": {
	"@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^12.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.1",

3. 모듈 재설치

npm install

에러 발생없이 모듈이 모두 정상적으로 설치된다!

++ 버전 변경(다운그레이드) 후 발생하는 오류 해결법

1. react-dom/client 에러

버전 변경 후 실행시, 아래와 같은 에러가 발생했다.

Compiled with problems:X

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

Module not found: Error: Can't resolve 'react-dom/client' in '소스파일경로'

리액트 버전이 달라져서 생긴 에러로, index.js 파일에서 ReactDOM을 import하는 경로를 'react-dom/client'가 아닌 'react-dom'으로 변경해주면 된다.

2. createRoot is not a function 에러

이번에는 실행은 되었으나, 화면이 나오지 않았다.
콘솔을 확인해보니 아래와 같은 에러메세지가 떴다.

이 또한 리액트 버전을 다운그레이드시켜서 발생하는 에러로, 이전 버전의 코드로 변경해주면 해결이 된다.

위 index.js의 코드를 아래 코드로 변경해주면 된다.

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

.
.
.
.
.
끝!!!