Introduction

Netlify 배포 중 발생하는 에러 중 하나인 npm ERR! code ERESOLVE or npm ERR! ERESOLVE could not resolve 에러 해결 방법 입니다.

Error

Error의 일부분 입니다.

11:39:48 PM: Installing NPM modules using NPM version 8.19.3
11:39:50 PM: npm ERR! code ERESOLVE
11:39:50 PM: npm ERR! ERESOLVE could not resolve
11:39:50 PM: npm ERR!
11:39:50 PM: npm ERR! While resolving: react-reveal@1.2.2
11:39:50 PM: npm ERR! Found: react@18.2.0
11:39:50 PM: npm ERR! node_modules/react
11:39:50 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
11:39:50 PM: npm ERR!   react@"^18.2.0" from the root project
11:39:50 PM: npm ERR!   peer react@">=16.8.0" from @floating-ui/react-dom@1.1.0
11:39:50 PM: npm ERR!   node_modules/@floating-ui/react-dom
11:39:50 PM: npm ERR!     @floating-ui/react-dom@"^1.0.0" from @floating-ui/react-dom-interactions@0.9.3
11:39:50 PM: npm ERR!     node_modules/@floating-ui/react-dom-interactions
11:39:50 PM: npm ERR!       @floating-ui/react-dom-interactions@"^0.9.1" from flowbite-react@0.3.7
11:39:50 PM: npm ERR!       node_modules/flowbite-react
11:39:50 PM: npm ERR!         flowbite-react@"^0.3.7" from the root project
11:39:50 PM: npm ERR!     @floating-ui/react-dom@"^1.0.0" from flowbite-react@0.3.7
11:39:50 PM: npm ERR!     node_modules/flowbite-react
11:39:50 PM: npm ERR!       flowbite-react@"^0.3.7" from the root project
11:39:50 PM: npm ERR!   18 more (@floating-ui/react-dom-interactions, ...)
11:39:50 PM: npm ERR!
11:39:50 PM: npm ERR! Could not resolve dependency:
11:39:50 PM: npm ERR! peer react@"^15.3.0 || ^16.0.0" from react-reveal@1.2.2
11:39:50 PM: npm ERR! node_modules/react-reveal
11:39:50 PM: npm ERR!   react-reveal@"^1.2.2" from the root project
11:39:50 PM: npm ERR!
11:39:50 PM: npm ERR! Conflicting peer dependency: react@16.14.0
11:39:50 PM: npm ERR! node_modules/react
11:39:50 PM: npm ERR!   peer react@"^15.3.0 || ^16.0.0" from react-reveal@1.2.2
11:39:50 PM: npm ERR!   node_modules/react-reveal
11:39:50 PM: npm ERR!     react-reveal@"^1.2.2" from the root project
11:39:50 PM: npm ERR!
11:39:50 PM: npm ERR! Fix the upstream dependency conflict, or retry
11:39:50 PM: npm ERR! this command with --force, or --legacy-peer-deps
11:39:50 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
11:39:50 PM: npm ERR!
11:39:50 PM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
11:39:50 PM: npm ERR! A complete log of this run can be found in:
11:39:50 PM: npm ERR!     /opt/buildhome/.npm/_logs/2022-12-31T04_39_48_387Z-debug-0.log
11:39:50 PM: Error during NPM install
11:39:50 PM: Build was terminated: Build script returned non-zero exit code: 1
11:39:50 PM: Failing build: Failed to build site
11:39:50 PM: Finished processing build request in 10.250261121s

react@"^18.2.0 버전에서 16.8.0 미만의 버전을 필요로 하는 리액트 라이브러리를 설치하고 Netlify에 deploy하니 이 에러와 함께 deploy가 안되는 문제를 겪게 되었습니다.

Solution

해결 방법은 아래 포스트를 참고하였습니다.
https://answers.netlify.com/t/deploy-failed-to-publish-website/70341/1

리액트 버전과 라이브러리가 필요로 하는 버전이 서로 달라서 발생하는 에러입니다peer dependency conflict. React를 downgrade하는 방법도 있겠지만, 다른 library들에게 dependency error를 발생시킬 수도 있기 때문에 이 방법은 추천 하지 않습니다. Error를 자세히 보면 해결 방법이 나와있습니다. npm ERR! Fix the upstream dependency conflict, or retry.

npm install --legacy-peer-deps 커맨드를 사용해 peer dependency conflict를 해결 할 수 있는데, Netlify가 build하는 도중에 입력을 해야하니, npm install의 flag를 패스 시켜줄 수 있는 NPM_FLAGS를 사용 합니다.

1. Netlify에서 Domain Settings 클릭
2. 왼쪽 탭에서 Build & deploy 클릭
3. Environment에서

   

   Edit variables 클릭
   (아무런 Environment variables를 입력하지 않았다면, NPM_FLAGS가 안적혀 있을겁니다.)
4. Key에 NPM_FLAGS, Value에 npm install --legacy-peer-deps 입력 한 후 Save 클릭
5. Redeploy

피드백 환영

이 문제 해결하는데 Stackoverflow에도 해결 방법이 안올라와 있어서 고생을 많이 했네요. 같은 에러를 겪으시는 다른 분들은 제 포스트를 보고 빠르게 해결하셨으면 좋겠습니다.

제가 잘못 전달했거나 피드백이 있으시다면 언제나 환영합니다.