[Error] npm ERR! code ERESOLVE

🚨 문제 발생 상황

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
...

React 프로젝트 개발 중, npm으로 라이브러리를 설치했는데
위와 같은 Error가 발생하며 설치되지 않았습니다.
node_modules 폴더와 package-lock.json 파일을 삭제하고 재설치해도 마찬가지였어요.

🤔 문제 원인

• dependencies 의존성 버전 문제
• node <> npm 간의 버전이 맞지 않을 경우
• sudo 권한으로 명령어를 실행해야 하는 경우

찾아보니 문제가 생길 수 있는 원인은 많았습니다.
제가 겪은 Error의 메세지를 자세히 살펴보니 설치된 패키지가 의존하는 typescript의 버전과 제가 설치한 typescript의 버전이 맞지 않는다는 걸 알 수 있었어요.

그리고 해결책으로 명령어 실행시 --force 나 --legacy-peer-deps 커맨드를 추가하라는 코멘트도 주고 있군요. 이 부분은 아래에서 좀 더 다루겠습니다. (이래서 오류메세지를 자세히 읽는 게 중요하네요!)

의존성

npm은 package.json 파일을 통해서 프로젝트 정보와 패키지의 의존성을 관리합니다. 프로젝트가 참조하는 패키지를 의존하는 패키지라고 보면 되고, b라는 패키지를 쓰려면 a라는 패키지의 2.0.0 버전이 필요하다는 오류 예시처럼 패키지끼리도 의존을 할 수 있는 것으로 이해했습니다.

사실 그동안 라이브러리, 패키지를 설치해서 즐겁게 사용만 했으니 이런 오류를 만나기 전엔 의존성에 대해 깊게 생각해본 적이 없었고, 패키지 관리의 중요성을 새삼 느끼게 되었습니다..🥺

• dependencies
  : 프로젝트가 의존하는 패키지의 이름과 버전 명시
• devDependencies
  : 개발 단계에서만 사용하는 개발용 의존 패키지 명시
• peerDependencies
  : 패키지가 다른 패키지로부터 직접 불러와지는 것은 아니지만, 특정 버전의 패키지와 호환됨
• optionalDependencies
  : 선택적 의존성, 설치에 실패해도 다른 라이브러리 설치에 영향을 주지 않는 의존성
• bundleDependencies
  : 패키지와 함께 제공되는 패키지들 (타사 라이브러리가 npm에 없거나, 일부 프로젝트를 포함하려는 경우)

peerDependencies

Automatically installing peer dependencies is an exciting new feature introduced in npm 7. In previous versions of npm (4-6), peer dependencies conflicts presented a warning that versions were not compatible, but would still install dependencies without an error. npm 7 will block installations if an upstream dependency conflict is present that cannot be automatically resolved.

👀 번역
피어 종속성 자동 설치는 npm 7에 도입된 흥미로운 새 기능입니다. npm(4-6)의 이전 버전에서 피어 종속성 충돌은 버전이 호환되지 않지만 오류 없이 종속성을 설치한다는 경고를 표시했습니다. npm 7은 자동으로 해결할 수 없는 업스트림 종속성 충돌이 있는 경우 설치를 차단합니다.

npm 6버전까지는 install 과정에서 peerDependencies를 무시하고, 버전이 일치하지 않으면 경고 메세지만 보여줬습니다. 2021년 2월에 나온 npm 7버전부터는 peerDependencies를 설치하고 버전이 일치하지 않으면 설치를 차단하고 Error를 띄운다고 합니다.

🧚 해결 방법

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.

npm이 제시하는 해결 방법은 두 가지 입니다.
--force 나 --legacy-peer-deps 커맨드를 추가하면 된다는데요.

• npm install --force

  • bypass the conflict
  • --force 는 필요한 경우 패키지 의존성을 위해 추가적인 패키지를 설치합니다.
  • package-lock.json에 다른 dependencies 버전을 추가합니다.

• npm install --legacy-peer-deps

  • ignore peer dependencies entirely
  • peerDependencies가 자동 설치되는 기능을 무시합니다.
  • 버전이 맞지 않아도 일단 설치합니다. (6버전 이하에서 동작하던 것처럼 설치)

--force 가 더 옳은 방법이라는 의견이 많다고 하네요.
--force 커맨드를 통해서 다른 의존 버전을 설치해보는 방법을 선행하고, 그래도 안된다면(😭) --legacy-peer-deps 커맨드를 통해 오류없이 설치하는 방법으로 시도해보면 좋을 것 같습니다.

참고

• https://stackoverflow.com/questions/66020820/npm-when-to-use-force-and-legacy-peer-deps
• https://www.korecmblog.com/blog/ERESOLVE-unable-to-resolve-dependency-tree

아직 배울 게 많은 초보 개발자 입니다.
틀린 내용이 있다면 댓글로 알려주세요!❣️