[NPM] 협업에 꼭 필요한 Conflicting peer dependency 해결하기 (--legacy-peer-deps, --force, node 버전 맞추기)

작업을 열심히 하고 merge했는데 ci 에서 아래와 같은 오류가 발생했다.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @tanstack/react-query@5.8.7
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!   peer react@"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" from @react-aria/ssr@3.9.0
npm ERR!   node_modules/@react-aria/ssr
npm ERR!     @react-aria/ssr@"^3.6.0" from @react-aria/utils@3.17.0
npm ERR!     node_modules/@react-aria/utils
npm ERR!       @react-aria/utils@"3.17.0" from react-modal-sheet@2.2.0
npm ERR!       node_modules/react-modal-sheet
npm ERR!         react-modal-sheet@"^2.2.0" from the root project
npm ERR!   19 more (@react-aria/utils, @react-stately/utils, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @tanstack/react-query@5.8.7
npm ERR! node_modules/@tanstack/react-query
npm ERR!   @tanstack/react-query@"^5.8.7" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@"^18.0.0" from @tanstack/react-query@5.8.7
npm ERR!   node_modules/@tanstack/react-query
npm ERR!     @tanstack/react-query@"^5.8.7" 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.

내 컴퓨터에서도 발생했던 오류다! --legacy-peer-deps로 해결했었다.

--legacy-peer-deps

--force

이 플래그 들을 사용하면 해결은 되지만 둘 다 충돌을 우회하는 것이고 잠정적인 위험을 안고 가는 것이기 때문에 나중에 큰 장애가 날 수도 있다.

일단 해당 오류가 발생하는 이유는 dependency tree가 충돌하였기 때문이다.

dependency tree가 충돌한 이유는 서버 환경이나 협업자가 다른 node 버전을 쓰고 있기 때문이다. 이로 인해 npm install하며 package-lock.json에 설치되는 dependency tree가 다르기 때문에 발생하는 오류로 보인다.

근본적인 해결책은 협업하는 작업자들의 node 버전을 맞추는 것이다.

1. node 버전을 통일

2. 기존 package-lock.json 삭제

3. 변경한 node로 install 하여 새로운 package-lock.json 생성

해결!