[에러노트] NPM install error --force, --legacy-peer-deps | feat .npmrc로 해결하기

 

리액트가 버전을 18로 업그레이드 한 이후로 특정 라이브러리를 설치할 때마다 아래와 같은 에러문구를 만날 때가 있다. 

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: pug-loader@2.4.0
npm ERR! Found: pug@3.0.2
npm ERR! node_modules/pug
npm ERR!   dev pug@"^3.0.2" from the root project
npm ERR!   peer pug@"^2.0.0 || ^3.0.0" from pug-plain-loader@1.1.0
npm ERR!   node_modules/pug-plain-loader
npm ERR!     dev pug-plain-loader@"^1.1.0" from the root project  
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer pug@"^2.0.0" from pug-loader@2.4.0
npm ERR! node_modules/pug-loader
npm ERR!   dev pug-loader@"^2.4.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: pug@2.0.4
npm ERR! node_modules/pug
npm ERR!   peer pug@"^2.0.0" from pug-loader@2.4.0
npm ERR!   node_modules/pug-loader
npm ERR!     dev pug-loader@"^2.4.0" 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 -i <라이브러리> --legacy-peer-deps 를 명시해주는 것이다. 

 

그런데, 이것보단 조금 더 좋은 방법이 있었다. 

 

https://github.com/npm/rfcs/discussions/283

Configure --legacy-peer-deps with .npmrc · Discussion #283 · npm/rfcs

 

kentcdodds라는 분이 작성해주신 글인데, 

 

kentcdodds - Overview

 

 

.npmrc 파일에 

legacy-peer-deps=true

 

를 명시해주면 더 이상 npm 뒤에 해당 옵션을 붙여주지 않아도된다. 

 

 

내가 이것을 발견하게 된 계기는 storybook를 설치하면서였다. storybook을 설치하는데, 왠걸 .npmrc라는 친구가 들어있고 이 안에 

legacy-peer-deps=true 가 들어있는 것이다. 

 

아니 나는 npm i 을 할 때마다 버전이 맞지 않다는 저 위의 문구를 만나면서 아 이것보다 조금 더 좋은 방법이 없을까? 고민했었는데, 스토리북을 설치했더니 요상한 .npmrc라는 파일이 들어있고 그 안에 legacy-peer-deps=true 가 들어있으니 뭔가 감이 탁 왔다. 

그래서 검색을 했더니 kentcdodds가 본인이 즐겨 사용하는 방법이라면서 소개를 해줬는데, 언제 사용하냐면 특정 라이브러리의 메인테이너가 더 이상 유지보수를 하지 않아서, 버전이 업그레이드가 안되는 그런 라이브러리를 사용해야할 때 애용하는 방법이라는 것이다. 굿! 

 

아니나 다를까. 해당 파일을 내 로컬에 위치한 후 npm i 를 실행해보니, 더 이상 보기싫은 저 에러문구들을 마주하지 않을 수 있었다. 

 

---

그런데, .npmrc란 뭐하는 녀석인걸까?

 

이 파일은 NPM에 대한 설정을 해주는 파일인데, NPM에 대한 커멘트가 실행될 때 어떻게 행동해야하는지를 정의하고 세팅할 수 있는 파일이라고 보면 된다. 

[출처 : https://sugerent.tistory.com/633]

 

npm 뒤에 rc는 Runtime configuration을 뜻한다.

 

만약에 npmrc 파일을 수정하고 싶으면 직접 수정할 수도 있지만, npm config라는 명령어를 통해서도 수정할 수 있다. 

[출처 : https://docs.npmjs.com/cli/v8/configuring-npm/npmrc]