[에러 해결] React 프로젝트에서 npm install 명령어가 실행이 안되는 문제

전에도 이렇게 초기 셋팅된 React 프로젝트에서 npm install 문제가 있었던 것 같은데 안적어놓은 나의 문제..

오늘은 상세히 적어둘 것이다!!!

 

 

🩺 에러 발생

 

일단 내 상황은 다음과 같다.

1. create-react-app으로 막 따끈따끈하게 만든 프로젝트
2. npm start는 잘 되어 잘 뜬다.
3. 그런데 외부 라이브러리를 설치하려고 npm install 라이브러리 하면 에러가 파파팍!!

나는 그저 Material UI를 쓰려 했을 뿐인데...

다음과 같이 엄청 긴 에러 메세지들이 나를 반긴다.

PS C:\study\프로젝트명> npm install @mui/material @emotion/react @emotion/styled

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: clone-archisketch-gallery@0.1.0      
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/react@11.8.2    
npm ERR!   node_modules/@emotion/react
npm ERR!     @emotion/react@"*" from the root project
npm ERR!     peerOptional @emotion/react@"^11.5.0" from @mui/material@5.5.3
npm ERR!     node_modules/@mui/material
npm ERR!       @mui/material@"*" from the root project
npm ERR!     1 more (@emotion/styled)
npm ERR!   1 more (@emotion/styled)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/material@5.5.3
npm ERR! node_modules/@mui/material
npm ERR!   @mui/material@"*" 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! See C:\Users\사용자명\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\사용자명\AppData\Local\npm-cache\_logs\2022-03-30T02_57_38_133Z-debug-0.log

 

일단 에러 메시지를 찬찬히 해석해보면

1. 내 프로젝트에서 react는 현재 18.0.0버전이다.
2. 내가 설치하려고 하는 @mui/material은 17.0.0버전에서 @mui/material@5.5.3를 설치할 수 있다.
3. @emotion/react는 @mui/material@5.5.3 으로 부터 @emotion/react"^11.5.0"을 사용할 수 있다.
4. 고로 dependency error가 난 것이다~

 

결국 가장 중요한건 이 부분 메시지였던 것이다.

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/material@5.5.3
npm ERR! node_modules/@mui/material
npm ERR!   @mui/material@"*" from the root project

 

어떻게 해결해야하는가..

 

 

 

💊 에러 해결

 

친절한 npm은 해결 방법을 에러 메시지 및에 같이 적어주었다.

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.

1. 명령어 뒤에 --force 붙이기
2. 명령어 뒤에 --legacy-peer-deps 붙이기

 

이 둘의 차이가 뭐지..?

함 알아봅시다.

 

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 version 7에서 등장한 peer dependencies 자동 설치 기능이 추가되면서 발생한다.

이전 4~6 버전에서는 경고만 표시했지만 7 버전은 충돌이 있는 경우 에러로 판단해 설치를 중단해버린다.

그래서 peer dependencies 충돌이 생겼을 때 어떻게 할 것이냐를 두가지 옵션으로 정할 수 있게 되었는데, --force 와 --legacy-peer-deps 옵션이 여기에 사용된다.

 

 

 

1. --force

• 충돌하는 peerDependencies가 root project에 설치된다. (충돌 우회)
• package-lock.json에 몇가지의 다른 의존 버전들을 추가한다.
• 사용 예

npm install 설치할 라이브러리 --force

 

2. --legacy-peer-deps

• peerDependencies가 자동으로 설치되는 기능을 무시한다.(충돌 무시)
• peerDependency가 맞지 않아도 일단 설치한다.
• 사용 예

npm install 설치할 라이브러리 --legacy-peer-deps

 

나는 1번 --force를 사용하여 해결하였다.

일단 무시보단 우회가 낫지 않을까 하는 생각이었달까?

PS C:\study\프로젝트명> npm install @mui/material @emotion/react @emotion/styled --force

npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @mui/material@5.5.3
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   peer react@"^17.0.0" from @mui/base@5.0.0-alpha.74  
npm WARN   node_modules/@mui/material/node_modules/@mui/base   
npm WARN     @mui/base@"5.0.0-alpha.74" from @mui/material@5.5.3
npm WARN     node_modules/@mui/material
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^17.0.0" from @mui/material@5.5.3
npm WARN node_modules/@mui/material
npm WARN   @mui/material@"*" from the root project
npm WARN 
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^17.0.0" from @mui/material@5.5.3       
npm WARN   node_modules/@mui/material
npm WARN     @mui/material@"*" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @mui/material@5.5.3
npm WARN Found: react-dom@18.0.0
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^17.0.0" from @mui/base@5.0.0-alpha.74
npm WARN   node_modules/@mui/material/node_modules/@mui/base   
npm WARN     @mui/base@"5.0.0-alpha.74" from @mui/material@5.5.3
npm WARN     node_modules/@mui/material
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^17.0.0" from @mui/material@5.5.3     
npm WARN node_modules/@mui/material
npm WARN   @mui/material@"*" from the root project
npm WARN 
npm WARN Conflicting peer dependency: react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^17.0.0" from @mui/material@5.5.3   
npm WARN   node_modules/@mui/material
npm WARN     @mui/material@"*" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency

added 32 packages, and audited 1440 packages in 29s

176 packages are looking for funding
  run `npm fund` for details

6 moderate severity vulnerabilities

To address all issues (including breaking changes), run:       
  npm audit fix --force

Run `npm audit` for details.

 

npm ERR!이 모두 npm WARN으로 바뀌었고, 읽어보면 overriding peer dependency가 열심히 되고 있는 것을 볼 수 있다. 쨋든 이렇게 해결 완료!

 

 

 

 

📖 참고

https://velog.io/@yonyas/Fix-the-upstream-dependency-conflict-installing-NPM-packages-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%EA%B8%B0

npm install `--force` and `--legacy-peer-deps` 차이점

https://jane-aeiou.tistory.com/79?category=1018076 

[Node.js] npm install --force 와 --lagacy-peer-deps 차이