[NPM] Conflicting peer dependency 에러 해결하기

개요

NodeJS로 프로젝트를 진행할 때, NPM을 사용하여 필요한 패키지를 설치하는 것은 필수입니다. 이번 블로그 포스트에서는 NPM을 사용하여 패키지를 설치할 때 발생하는 Conflicting peer dependency 에러를 해결하는 방법에 대해서 알아보도록 하겠습니다.

Conflicting peer dependency 에러

npm install 명령어를 사용하여 패키지를 설치할 때 다음과 같이 Conflicting peer dependency 에러가 발생할 때가 있습니다.

Installing @typescript-eslint/eslint-plugin@latest, eslint-plugin-react@latest, @typescript-eslint/parser@latest
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR!   @typescript-eslint/eslint-plugin@"^5.5.0" from [email protected]
npm ERR!   node_modules/eslint-config-react-app
npm ERR!     eslint-config-react-app@"^7.0.1" from [email protected]
npm ERR!     node_modules/react-scripts
npm ERR!       react-scripts@"5.0.1" from the root project
npm ERR!   peerOptional @typescript-eslint/eslint-plugin@"^4.0.0 || ^5.0.0" from [email protected]
npm ERR!   node_modules/eslint-plugin-jest
npm ERR!     eslint-plugin-jest@"^25.3.0" from [email protected]
npm ERR!     node_modules/eslint-config-react-app
npm ERR!       eslint-config-react-app@"^7.0.1" from [email protected]
npm ERR!       node_modules/react-scripts
npm ERR!         react-scripts@"5.0.1" from the root project
npm ERR!   1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @typescript-eslint/eslint-plugin@"6.4.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/parser
npm ERR!   peer @typescript-eslint/parser@"^6.0.0 || ^6.0.0-alpha" from @typescript-eslint/[email protected]
npm ERR!   node_modules/@typescript-eslint/eslint-plugin
npm ERR!     dev @typescript-eslint/eslint-plugin@"6.4.1" 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.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/deku/.npm/_logs/2023-08-23T07_12_06_464Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/deku/.npm/_logs/2023-08-23T07_12_06_464Z-debug-0.log

Conflicting peer dependency 에러는 설치하고자 하는 패키지의 종속성(Dependency)이 이미 설치된 패키지의 종속성과 충돌할 때 발생합니다. 즉, 설치하고자 하는 패키지를 사용하기 위해 해당 패키지가 필요로하는 패키지들이 이미 설치된 다른 패키지의 버전과 충돌하여 발생합니다.

이 블로그 포스트에서 소개한 에러를 자세히 살펴보면, @typescript-eslint/parser 패키지의 6.4.1 버전이 이미 설치되어있는데, @typescript-eslint/eslint-plugin 패키지가 @typescript-eslint/parser의 버전 ^6.0.0 || ^6.0.0-alpha을 요구하고 있어서 설치를 할 수 없다고 Conflicting peer dependency 에러를 표시하고 있습니다.

해결 방법

Conflicting peer dependency 에러를 해결하는 방법은 다음과 같습니다.

–force 또는 –legacy-peer-deps 옵션

이 문제를 해결하기 위해 npm install을 실행할 때, 다음과 같이 --force 또는 --legacy-peer-deps 옵션을 사용하여 설치를 할 수 있습니다.

npm install [Package name] --force
npm install [Package name] --legacy-peer-deps

.npmrc 파일

충돌 문제가 자주 발생하지 않지만, 만약 현재 프로젝트에서 충돌 문제가 자주 발생한다면 프로젝트 폴더에 .npmrc 파일을 만들고 다음과 같이 수정합니다.

legacy-peer-deps=true

이렇게 .npmrc 파일을 생성해 두면, npm install 명령어를 실행할 때마다 --legacy-peer-deps 옵션을 사용하는 것과 동일하게 동작합니다.

npm config

.npmrc 파일을 생성하고 legacy-peer-deps를 직접 설정할 수 있지만, 다음과 같이 명령어를 사용하여 .npmrc 파일을 설정할 수 있습니다.

npm config --location=project set legacy-peer-deps=true

--location 옵션에는 global, user, project를 설정할 수 있으며, project를 설정한 경우, 해당 명령어를 실행한 폴더에 .npmrc 파일이 생성되고 legacy-peer-deps=true가 자동으로 설정됩니다.

완료

이것으로 NPM을 사용하여 패키지를 설치할 때, 종종 발생하는 Conflicting peer dependency 에러를 해결하는 방법에 대해서 알아보았습니다. Conflicting peer dependency가 발생하신다면 위에 방법을 통해 해결해 보시기 바랍니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.