npm install 실패 (dependency 에러, 캐시 삭제 등)

 

오랜만에 리액트 프로젝트를 생성한 후 npm install을 했는데 계속해서 에러가 발생했다. npm install 이후, 에러가 발생한다면 아래와 같은 원인이 있을 수 있는데 에러 메세지를 확인하여 각각에 맞는 해결방법으로 해결해주면 된다.

 

1. npm install 에러의 흔한 원인

• sudo 권한으로 명령어를 실행해야하는 경우
• dependency 버전 문제
• node와 npm 버전이 맞지 않는 경우

 

2. dependency 버전 관련 에러 해결

오랜만에 새로운 프로젝트를 시작한 후, npm install을 실행시켰는데 다음과 같은 에러가 발생했다. 

jieun@jieun-MacBookAir:~/Desktop/dev$npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: gpt-diary@0.0.0
npm ERR! Found: eslint@undefined
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^8.45.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@">=7" from eslint-plugin-react-refresh@0.4.3
npm ERR! node_modules/eslint-plugin-react-refresh
npm ERR!   dev eslint-plugin-react-refresh@"^0.4.3" 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/jieun/.npm/_logs/2023-10-22T12_53_57_612Z-eresolve-report.txt

 

에러 메세지를 확인해보면 ERESOLVE unable to resolve dependency tree라고 나오는데 dependency 버전 관련 문제가 발생했음을 알 수 있다. 이 경우, 두가지의 해결방법이 있을 수 있는데 아래 두가지중 하나의 명령어를 사용하면 된다.

$ npm install --force
$ npm install --save --legacy-peer-deps

 

3. --force vs --legacy-peer-deps

dependency 관련 문제를 해결하기 위해 두가지 옵션 중 하나를 선택할 수 있는데 --force의 경우 package-lock.json에 다른 dependency 버전을 추가하는 것으로 충돌하는 peer dependency들을 루트 프로젝트에 설치하여 에러를 해결한다. --legacy-peer-deps 옵션의 경우 peer dependency가 맞지 않아도 일단 설치하는 것으로  --force를 먼저 실행시켜보고 안되면 차선책으로 --legacy-peer-deps 옵션을 선택해 실행시켜보면 될 것 같다.

 

4. npm 캐시 폴더 권한 문제

--force 옵션을 먼저 실행시켜보고, 차선책으로 --legacy-peer-deps 옵션 사용을 사용했더니 아래와 같은 다른 에러가 발생했다. 관련 에러를 확인해보니 npm 캐시 폴더에 관한 권한 문제인 것 같았다. 

jieun@jieun-MacBookAir:~/Desktop/dev$npm install --save --legacy-peer-deps
npm ERR! code EACCES
npm ERR! syscall open
npm ERR! path /Users/jieun/.npm/_cacache/index-v5/c1/3e/4c4d082623156529b4fa73601a4ac92e33a6b20f963f1096cee31b6d9010
npm ERR! errno EACCES
npm ERR! 
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR! 
npm ERR! To permanently fix this problem, please run:
npm ERR!   sudo chown -R 501:20 "/Users/jieun/.npm"

 

해당 에러는 npm 캐시 폴더에 루트 소유자 파일이 있어 발생하는 문제로 에러 메세지에서 제시한대로 'sudo' 명령어를 사용하여 캐시 폴더의 권한을 변경해주었다.

jieun@jieun-MacBookAir:~/Desktop/dev$sudo chown -R 501:20 "/Users/jieun/.npm"
Password:

 

이후, npm install을 실행했더니 에러 없이 정상적으로 잘 설치되는 것을 확인할 수 있었다.