문제 발생

React 프로젝트를 netlify로 배포하려고 했다. 그런데 실패했다. 로컬에서는 잘 돌아갔는데 뭐가 문제일까?

netlify가 친절하게 Deploy log를 쫙 보여준다. 에러가 난 부분을 살펴보자.

12:47:35 AM: Installing npm packages using npm version 8.19.3
12:47:36 AM: npm ERR! code ERESOLVE
12:47:36 AM: npm ERR! ERESOLVE could not resolve
12:47:36 AM: npm ERR!
12:47:36 AM: npm ERR! While resolving: react-beautiful-dnd@13.1.0
12:47:36 AM: npm ERR! Found: react@18.2.0
12:47:36 AM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
12:47:36 AM: npm ERR! node_modules/react
12:47:36 AM: npm ERR!   react@"^18.2.0" from the root project
12:47:36 AM: npm ERR!   peer react@"^18.0.0" from @testing-library/react@13.3.0
12:47:36 AM: npm ERR!   node_modules/@testing-library/react
12:47:36 AM: npm ERR!     @testing-library/react@"^13.3.0" from the root project
12:47:36 AM: npm ERR!   13 more (framer-motion, react-confetti, react-dnd, react-dom, ...)
12:47:36 AM: npm ERR!
12:47:36 AM: npm ERR! Could not resolve dependency:
12:47:36 AM: npm ERR! peer react@"^16.8.5 || ^17.0.0" from react-beautiful-dnd@13.1.0
12:47:36 AM: npm ERR! node_modules/react-beautiful-dnd
12:47:36 AM: npm ERR!   react-beautiful-dnd@"^13.1.0" from the root project
12:47:36 AM: npm ERR!
12:47:36 AM: npm ERR! Conflicting peer dependency: react@17.0.2
12:47:36 AM: npm ERR! node_modules/react
12:47:36 AM: npm ERR!   peer react@"^16.8.5 || ^17.0.0" from react-beautiful-dnd@13.1.0
12:47:36 AM: npm ERR!   node_modules/react-beautiful-dnd
12:47:36 AM: npm ERR!     react-beautiful-dnd@"^13.1.0" from the root project
12:47:36 AM: npm ERR!
12:47:36 AM: npm ERR! Fix the upstream dependency conflict, or retry
12:47:36 AM: npm ERR! this command with --force, or --legacy-peer-deps
12:47:36 AM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
12:47:36 AM: npm ERR!
12:47:36 AM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
12:47:36 AM: npm ERR! A complete log of this run can be found in:
12:47:36 AM: npm ERR!     /opt/buildhome/.npm/_logs/2023-01-11T15_47_35_608Z-debug-0.log
12:47:36 AM: Error during npm install
12:47:36 AM: Build was terminated: Build script returned non-zero exit code: 1
12:47:36 AM: Failing build: Failed to build site
12:47:37 AM: Finished processing build request in 6.851847167s

대충 react-beautiful-dnd 라이브러리 버전이 React 버전이랑 안 맞다는 뜻인 것 같다.

해결 시도 1: downgrade React version (실패)

React 버전이 다른 라이브러리와 호환이 안 되나 싶어 버전을 낮춰 보았다.

• React 버전 변경: npm install react@^[버전 정보] react-dom@[버전 정보]

npm install react@^17.0.0 react-dom@17.0.0

나는 17.0.0으로 낮추려 했으나 어쩐지 친절하게도 자동으로 17로 시작하는 최신 버전인 17.0.2이 설치되었다. package.json에서 버전이 바뀐 것을 확인하고 다시 push한다.
netlify 자동 배포 설정이 되어 있어서 성공을 기원하면서 기다리기만 하면 된다.

그런데 또 실패!

2:01:56 AM: npm ERR! While resolving: @testing-library/react@13.3.0
2:01:56 AM: npm ERR! Found: react@17.0.2
2:01:57 AM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
2:01:56 AM: npm ERR! node_modules/react
2:01:56 AM: npm ERR!   react@"^17.0.2" from the root project
2:01:56 AM: npm ERR!   peer react@"^16.8.5 || ^17.0.0" from react-beautiful-dnd@13.1.0
2:01:56 AM: npm ERR!   node_modules/react-beautiful-dnd
2:01:56 AM: npm ERR!     react-beautiful-dnd@"^13.1.0" from the root project
2:01:56 AM: npm ERR!   13 more (use-memo-one, react-confetti, react-dnd, react-dom, ...)

이번에는 testing-library랑 버전이 안 맞나 보다. package dependencies 하나 맞추면 다른 하나 에러 나고... 이런 식으로 어떻게 다 맞추지? 한 번에 싹 다 맞추는 방법 없나?

해결 시도 2: update versions of package dependencies (성공)

ncu (npm-check-updates)

npm-check-updates upgrades your package.json dependencies to the latest versions, ignoring specified versions.

package.json에 명시된 package dependencies의 최신 버전을 확인하고 업데이트해주는 라이브러리이다.

ncu -u 명령어를 입력하면 package dependencies를 모조리 최신 버전으로 업데이트해 준다.

설치 및 사용법

npm i -g npm-check-updates
ncu -u
npm install

결과

싹 업데이트됐다. 다시 push 하고 기도 메타...

npm WARN만 뜨고 배포 성공!

참고
How to update each dependency in package.json to the latest version? - stackoverflow
npm-check를 이용한 npm 의존성 관리