[E-LOG] Vite 다운그레이드 중 ERESOLVE 의존성 충돌 오류

본 포스팅은 window 11 환경에서 작성되었습니다.

 

---

 

목차

 

vite 다운그레이드 시 생긴 오류

 

---

 

---

[Vite 다운그레이드 시 생긴 오류]

Create-React-App 지원을 종료한다는 소식을 듣고 CRA를 사용하던 입장에서 어떤 방식으로 React 개발 환경을 구성해야 할지 막막했다.

그러던 중 여러 문서를 찾아보며 vite라는 빌드 도구를 알게 되어 간단하게 사용해 봤었다.

그 당시에는 vite 6.3.5 버전으로 환경 구성을 하고 실행까지 잘 되는 것까지 확인하였다.

프로젝트 환경

 

프로젝트 진행을 하기 위해 vite를 사용해 react 환경을 구축하는 과정에서 오류가 발생했다.

최신 버전인 vite 7.0.0에서 node의 버전이 맞지 않아 설치가 불가능했다.

node를 업그레이드하기보다는 안정성을 위해 vite를 조금 낮은 버전이 6.5.0로 설치해 보자는 결론을 내렸다.

이전에 사용하던 버전과 최신버전 사이의 버전이라 적절할 거라 생각했다.

 

이때 재설치가 아닌 다운그레이드 과정으로 진행했다.

먼저 기존 node_modules과 package-lock.json을 제거한 후 vite 버전을 수정하였다.

수정 전

프로젝트 vite 버전 수정 전

수정 후

vite 버전 수정 후

 

그리고 npm install을 입력했다.

npm install 후 결과

 

오류 내용

PS C:\Users\samsung\Desktop\workspace\vite-project> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vite-project@0.0.0
npm ERR! Found: vite@undefined
npm ERR! node_modules/vite
npm ERR!   dev vite@"6.5.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0" from @vitejs/plugin-react@4.6.0
npm ERR! node_modules/@vitejs/plugin-react
npm ERR!   dev @vitejs/plugin-react@"^4.5.2" from the root project
npm ERR!   dev @vitejs/plugin-react@"^4.5.2" 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!
npm ERR! For a full report see:
npm ERR! C:\Users\samsung\AppData\Local\npm-cache\_logs\2025-07-03T04_37_26_183Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: C:\Users\samsung\AppData\Local\npm-cache\_logs\2025-07-03T04_37_26_183Z-debug-0.log

 

[원인]

의존성 충돌로 인해 설치에 실패했다.

설치하려는 패키지들끼리 버전 충돌이 있어 npm으로 해결을 할 수 없다는 뜻이다.

npm ERR! ERESOLVE unable to resolve dependency tree

 

<내 프로젝트>

    "devDependencies": {
        "@vitejs/plugin-react": "^4.5.2",
        "vite": "6.5.0"
    }

 

[원인 1]

vite@6.5.0를 설치하려고 했지만 설치에 실패하여 vite@undefined 상태이다.

즉 vite가 정상적으로 설치되지 않아 다른 패키지 (@vitejs/plugin-react)가 vite의 존재를 확인할 수 없다.

npm ERR! Found: vite@undefined
npm ERR!   dev vite@"6.5.0" from the root project

 

[원인 2]

vitejs/plugin-react@4.6.0은 vite가 반드시 있어야 한다.

vite 버전이 4.2.0 또는 5.0.0 또는 6.0.0 또는 7.0.0-beta.0중 하나여야 한다.

npm ERR! peer vite@"^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0" 
from @vitejs/plugin-react@4.6.0

 

현재는 vite가 설치되지도 않았고(undefined), 따라서 peerdependency가 충족되지 않아 설치에 실패했다.

 

[해결 방법]

vite 버전을 명확히 지정해 주면 된다.

먼저 기존 node_modules와 package-lock.json을 제거한다.

https://devyihyun.tistory.com/233

[E-LOG] Remove-Item : 매개 변수 이름 'rf'과(와) 일치하는 매개 변수를 찾을수 없습니다.

 

만약 cmd를 bash를 사용하고 있다면 

rm -rf node_modules package-lock.json

cmd를 powershell을 사용하고 있다면

Remove-Item -Recurse -Force .\node_modules; 
Remove-Item -Force .\package-lock.json

 

[TMI 더 보기]

 

npm cache clean --forece

npm install

이 명령은 설치 캐시와 잠금 파일을 지우고 깨끗한 상태에서 다시 설치하는 명령어이다.

node_modules와 package-lock.json을 제거해도 같은 상태라면 캐시를 지워보자!

 

package.json에서 vite를 수정해 준다.

    "devDependencies": {
        "@vitejs/plugin-react": "^4.5.2",
        "vite": "6.5.0"
    }

 

수정 전

수정 전

 

수정 후

수정 후

 

그리고 npm install을 해주었습니다.

npm install 후

 

서버를 실행

npm run dev

npm run dev 한 결과

 

브라우저 화면

IDE 화면

서버가 잘 실행되는 것을 볼 수 있다.

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

https://vite.dev/blog/announcing-vite7.html

Announcing Vite 7

 

https://github.com/vitejs/vite/issues/20287

TypeError: crypto.hash is not a function · Issue #20287 · vitejs/vite

 

https://github.com/vitejs/vite/discussions/20286

TypeError: crypto.hash is not a function · vitejs vite · Discussion #20286

 

https://aiday.tistory.com/63

Node.js & Npm Module 특정버전 또는 최신버전 업데이트하는 방법