[React] npm i 에러 해결(--force, --legacy-peer-deps)

기존 프로젝트를 클론 후 npm i를 했더니 오류가 발생하였다.

내 react 버전과 기존 프로젝트 버전이 맞지 않아 생기는 오류라고 한다.  해결은 아래 블로그 내용을 참고하였다.

나는 아래 실행으로 해결 되었다. (설치후 기존 start에 따라 npm run start:local 했더니 실행됨)

npm i --legacy-peer-deps

 

+ recoil-persist 를 추후 설치하고 싶은데 버전때문에 오류가 남. 아래로 진행하자 설치됨

npm i --legacy-peer-deps recoil-persist

---

https://naveen.tistory.com/22

NPM 인스톨 에러 --force, --legacy-peer-deps

 

오류: npm i 했더니 오류가 발생

npm i

>>

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.

 

 

에러를 요약하자면 pug-plain-loader 1.1.0 버전과 pug-loader 2.4.0 버전은 pug 2.0.0 버전을 참조하지만,

현재 프로젝트에는 pug 가 3.0.2 버전이라는 것.

 

맨 아래 메시지를 주목하자.

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.

대충 읽어보자면 dependency conflict, 즉 참조가 꼬였다는 소리.

해결하려면 --force 또는 --legacy-peer-deps 옵션을 추가하라고 한다.

 

두 개의 차이가 뭘까?

찾아보니 npm 7 버전부터 생긴 이슈라고 되어있다.

npm 7 is now generally available! | The GitHub Blog

--force: bypass the conflict

--legacy-peer-deps: ignore peer dependencies entirely

 

--force 는 충돌을 우회하고 --legacy-peer-deps 는 충돌을 무시한다고 한다.

 

npm: When to use `--force` and `--legacy-peer-deps`

조금 더 찾아보자.

 

요약하자면.

--force 는 필요한 경우 패키지 의존성을 위해 추가적인 패키지를 설치한다.(package-lock.json)

--legacy-peer-deps 는 그냥 무시하고 설치한다. (기존버전 무시하고 일단 설치)

 

참고로 npm 6 까지는 --legacy-peer-deps 와 비슷한 방식으로 자동 설치되었으나 npm 7 부터는 우선 차단부터 시킨다고 한다.

 

그럼 --legacy-peer-deps 를 날려보자.

npm i --legacy-peer-deps

실행! (나는 위 방법으로 되었으나 안되면 아래 오류뜨고 밑 방법 진행)

npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.      
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1

 

 

--force 를 날려봐도 마찬가지.

그럴 땐 마찬가지로 캐시를 날려버리자.

npm cache clear --force

그리고 --legacy-peer-deps 로 다시 설치.

npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
npm WARN deprecated @stylelint/postcss-markdown@0.36.2: Use the original unforked package instead: postcss-markdown
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1

added 1446 packages in 43s

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

 

오류 해결!

 

이도저도 안되면 yarn 을 씁시다.

---

https://stackoverflow.com/questions/72631164/overriding-peer-dependency-error-on-npm-install

Overriding peer dependency error on npm install

https://stackoverflow.com/questions/72596908/could-not-resolve-dependency-error-peer-react16-8-0-17-0-0-from-materia

Could not resolve dependency error peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4

https://copymaster.tistory.com/entry/Web-React-%EC%97%90%EB%9F%AC-%EC%B2%98%EB%A6%AC-unable-to-resolve-dependency-tree

[React] React 에러 처리 - unable to resolve dependency tree