[E-LOG] vite 환경 설정 오류 해결법

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

 

 

 

---

 

목차

vite 환결설정 오류

vite 환경설정 오류 원인

vite 환경설정 오류 해결

다운그레이드 시 생긴 오류

 

---

 

---

[vite 환경설정 오류]

vite를 사용해 react 개발 환경을 세팅하고 있었다.

npm create vite@latest

 

설정이 잘 되었는지 확인하기 위해 서버를 실행했다.

npm run dev

 

다음과 같은 오류가 발생했다.

error when starting dev server:
TypeError: crypto.hash is not a function
at getHash (file:///C:(생략)/workspace/vite-project/node_modules/vite/dist/node/chunks/dep-Bsx9IwL8.js:2834:21)

오류

 

글을 쓰면서 다시 보니 이미 npm install에서 경고가 있었다.

PS C:\Users\samsung\Desktop\workspace\vite-project> npm install
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'vite@7.0.0',
npm WARN EBADENGINE   required: { node: '^20.19.0 || >=22.12.0' },
npm WARN EBADENGINE   current: { node: 'v20.10.0', npm: '10.2.3' }
npm WARN EBADENGINE }

added 189 packages, and audited 190 packages in 25s

48 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

warning

• package : vite 7.0.0
• 필요 : node 20.19.0 EHsms 20.19.0 이상
• 현재 : node 20.10.0 , npm 10.2.3

버전이 맞지 않다고 경고(WARN)를 출력하고 있다.

---

[vite 환결설정 오류 원인]

환경설정 오류 원인

vite가 7.0으로 업그레이드되면서 상향된 node.js 버전을 요구한다.

vite 7.0에서는 ndoe.js 18 버전에 대한 지원이 완전히 종료되었다.

필요한 최소 버전은 20.19이고, 최대 버전은 22.12로 상향되었다.

 

<현재 사용 중인 버전>

1. vite 버전 확인하기

npm list vite

내가 사용하고 있는 vite 버전은 7.0.0이다.

사용중인 vite 버전

package.json의 내용

 

2. node.js 버전 확인하기

node -v

내가 사용하고 있는 node.js 버전은 20.10이다.

vite 7.0이 요구하는 최소 필요 버전인 20.19 보다 낮은 것이 원인이었다.

내가 사용하고 있는 node 버전

 

<내용 분석>

• 설치하려는 패키지 : vite 7.0 버전
• 요구하는 Node.js 버전 : 20.19.0 또는 22.12.0 이상
• 현재 사용 중인 Node.js 버전 : 20.10.0 → 요구 버전보다 낮다.

 

---

[vite 환경 설정 오류 해결]

두 가지의 해결 방법이 있다.

1. node.js 버전을 업그레이드
   • node.js 재설치
   • node.js 업그레이드
2. vite 버전 낮추기
   • vite 다시 설치하기 또는 버전에 맞춰서 설치하기
   • 다운그레이드하기

 

1. node.js 버전을 업그레이드

vite 7.0 이상을 사용하려면 node.js 버전을 높여 사용하면 된다.

 

<node.js 재설치>

https://devyihyun.tistory.com/166

[Node.js] Node.js 설치하기 / 노드js 설치하기

 

<node.js 업그레이드>

sudo n lts

명령어를 입력해 주면 node.js의 최신 LTS 버전이 설치된다.

안정 버전 설치	n stable
최신 버전 설치	n latest
lts 버전 설치	n lts
특정 버전 설치 (x.x.x 버전)	n x.x.x
이전 버전 삭제	n prune

 

2. vite 버전 낮추기

<vite 다시 설치하기>

vite를 재설치할 때 버전을 낮춰서 설치하는 방법이 있다.

npm create vite@버전

https://devyihyun.tistory.com/230

[React] vite로 리액트 설치하기

 

 

 

<다운그레이드하기>

vite 버전을 내가 사용하고 있는 node.js 버전에 맞춰서 빌드하면 된다.

 

먼저 기존 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

 

제거 전

제거 전

 

제거 후

제거 후

 

이미 vite 버전이 7.0 버전이라면 vite 버전을 수정 후 저장한다.

수정 전

수정 전

수정 후

수정 후

 

npm install을 진행한다.

npm install

npm install 실행

 

서버를 실행

npm run dev

npm run dev 결과

서버 실행

브라우저 화면

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

 

---

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

https://devyihyun.tistory.com/232

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

 

 

 

---

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

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

 

[ 참고자료 ]

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 특정버전 또는 최신버전 업데이트하는 방법