리액트 설치가 안 돼요 or 안 열려요 해결 방법

$ npm create vite@latest my-project

> npx
> create-vite my-project

npm error code ENOENT
npm error syscall spawn C:\Program Files\nodejs\node.exe
npm error path C:\Users\hyol1\Desktop\testtest
npm error errno -4058
npm error enoent spawn C:\Program Files\nodejs\node.exe ENOENT
npm error enoent This is related to npm not being able to find a file.
npm error enoent
npm error A complete log of this run can be found in: C:\Users\hyol1\AppData\Local\npm-cache\_logs\2025-01-24T05_46_46_547Z-debug-0.log

이거 혹은

$ npm create vite@latest ./testtest
cd testtest
npm install
npm run dev
Need to install the following packages:
create-vite@6.1.1
Ok to proceed? (y)


> npx
> create-vite ./testtest

node:internal/modules/cjs/loader:1247
  throw err;
  ^

Error: Cannot find module 'C:\Users\hyol1\Desktop\testtest\create-vite .\testtest'
    at node:internal/modules/cjs/loader:1244:15
    at node:internal/main/check_syntax:33:20 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

이런 문제 발생 내 경우엔 처음엔 이게 떴었다.

 

 

---

 

 

처음엔 npm run dev가 안 되더니 어느 순간부턴 리액트 설치 자체가 안 되는 문제가... 발생했다.

검색해서 찾아보니 머 캐시 지우고... node modules 지우고,,, package.json 지우고... 하면 다들 된다는데

나는 안 됐다 ㅋㅋ

 

레딧 스택 오버플로우에도 비슷한 문제에 멘붕에 빠진 외국인들이 보였고,,, 명확한 답도 아닌 애매한 답변들 or 답변조차 없음 ㅋㅋ 노드 재설치, 다운그레이드 설치 이걸 몇 번 반복하다 보니까 겁나 지쳤고,,,

 

지피티도 계속 같은 말을 반복했다. 캐시 지워봥ㅋㅋ 노드 지우고 다시 깔아봥ㅋㅋ 노드 버전 넘 높은 듯ㅋㅋ(최신 lts 버전이라고이게;;) 노드 모듈 지워봥ㅋㅋ 패키지 제이슨 지워봥ㅋㅋ 얀으로 해봥ㅋㅋ(안됨) npx로 해봥ㅋㅋ(안됨) pnpm으로 하면되징ㅋㅋ(안됨) ㅋㅋㅋㅋㅋ

ㅋㅋ

ㅋㅋ

ㅋㅋㅋㅋ

오만짓을 해도 안 되니 아 이거 포맷을,,,해야하나,,,?

하지만 너무,,, 귀찮았다... 그게 더 귀찮았다...

그래서 좀 더 뜯어보기로 결정했다.

 

일단 노드 문제는 아닌 걸로 확정했다. 원래 되던 게 안 되기 시작한 거니까

일단 나는 nvm으로 노드를 다시 설치했다.

 

 

어려운 말 다 빼고 핵심은 환경변수와 .npmrc라는 파일이다...

 

일단 nvm으로 노드 설치를 하든 업그레이드를 하든 했으면

 

 

1. cmd, 명령 프롬프트나 vs code 터미널에 where node를 입력해봅시다

지피티 말로는 nvm이 관리하고 있으면

C:\Users\사용자\AppData\Local\nvm\v20.18.2\node.exe

이렇게 나와야 한다고 한다 저기 숫자는 버전 이름임

 

앗참!@ AppData가 안 보이면 내 pc -> 사용자 -> 공용 말고 내가 설정해둔 이름 폴더 (여기 내부에 있는데요) -> 보기 -> 표시 -> 숨긴 항목 보기 하면 나타납니다.

 

2. echo %PATH%를 명령 프롬프트에 입력해봅시다 (이건 vs code 터미널에 입력하면 안 나옴)

그리고 결과가 나오면 확인하기 어려우니 지피티에 복붙해 중복된 것이 있느냐 물어봅시다

-> 중복된 거 있다고 하거나 정리가 안 됐다고 하면 문제가 있는 것임 

지피티가 오케이 해줄때까지 중복이 안 나오게끔 정리를 해줘야 합니다

 

3. 그리고 where npm을 입력해봅시다

C:\Users\사용자\AppData\Roaming\npm\npm
C:\Users\사용자\AppData\Roaming\npm\npm.cmd

이렇게 나오면 될겁니다

안 나오거나 중복되면 지피티한테 물어보면 됩니다.

 

4. 이 과정에서 등록된 게 없거나 중복된 게 너무 많으면 환경변수를 정리해줘야 합니다

제어판 시스템 환경 변수 편집 이란 곳에 들어가서 -> 고급 -> 환경변수에 들어가서 수정해주면 됩니다

여기에 path라는 변수에 각각 편집을 클릭해 들어가서 중복된 게 있는지, 지피티가 알려주는 주소가 있는지 없는지를

확인해서 복붙해서 그냥 넣어두면 됩니다

그리고 path 변수 편집 이전에 

이렇게 나열되어 있는 변수 - 값에도 함정이 있을 수 있습니다

그래서 어? 나 중복 다 지운 것 같은데 계속 오류 뜨네?.. 그럴 수 있으니 저것도 캡처해서 지피티한테 확인 받으시는 게 좋음...

 

대충 정리하자면 

1. 불필요한 경로 정리

2. 중복 경로 정리

 

이것이 핵심입니다...

저는 지피티랑 거의 이틀동안 싸워댔고 해결하기 전까지 확신이 없어서 따로 기록을 하면서 해결을 해놓은 것도 아니라 자세히 적기는 어렵네요

 

환경변수, where npm where npx echo %PATH% 이런 얘기 하심 알아서 지피티도 알아먹을 것임,,,

 

그 다음은 

 

npm config get prefix

이것도 해보고요

 

결과가

C:\Users\사용자\AppData\Roaming\npm

이렇게 안 나오면

 

npm config set prefix "%USERPROFILE%\AppData\Roaming\npm"

이런 명령어도 입력해주고요

 

 

그다음 핵심은 바로 .npmrc라는 파일입니다...

이건 그냥 파일이고 폴더에 들어간 것도 아니라 존재감이 없어서 눈에 띄지도 않아요 ㅋㅋㅋ...

경로는 Users -> 사용자명 or 컴터명? 하여튼 이 폴더에 있습니다

그냥... 밑에 내려보면

 

이렇게 숨겨져있습니다,,,

 

걍 메모장이든 뭐든 수정할 수 있는 걸로 아무거나 여시고요

저는 두 줄이 있었는데

script-shell=C:\Program Files\nodejs\node.exe

이걸 그냥 삭제해줬습니다

 

-> 그리고 해결

!!!!

 

 

 

총정리하자면

 

---

문제 상황 및 해결 과정

문제 발생 상황

1. Node.js 설치:
   • NVM(Windows용 Node Version Manager)로 Node.js를 설치하여 관리.
   • 설치된 경로: C:\Users\hyol1\AppData\Local\nvm\v20.18.2\node.exe.
2. npm 및 npx 사용 시 발생한 문제:
   • Vite 설치 중 ENOENT 에러:
     • 에러 메시지: spawn C:\Program Files\nodejs\node.exe ENOENT.
     • 이전 Node.js 설치 경로(C:\Program Files\nodejs)를 참조하려고 시도.
   • npm create vite@latest my-project
   • yarn 글로벌 설치 중 에러:
     • 에러 메시지: Cannot find module 'C:\Users\hyol1\AppData\Roaming\npm\node_modules\yarn\:; (node .\preinstall.js > \dev\null 2>&1 || true)'.
     • 이유: 환경 변수와 npm 설정 문제로 인해 잘못된 경로를 참조.
   • npm install -g yarn
3. 환경 변수와 설정 파일 문제:
   • 환경 변수에 중복된 경로(C:\Users\hyol1\AppData\Roaming\npm)와 불필요한 경로(C:\Program Files\nodejs)가 포함되어 충돌 발생.
   • .npmrc 파일에 잘못된 설정(script-shell=C:\Program Files\nodejs\node.exe)이 남아 있었음.

---

문제 해결 과정

1. NVM 설치 및 Node.js 활성화

• NVM으로 Node.js 설치:

  nvm install 20.18.2
  nvm use 20.18.2
  

• Node.js 경로 확인:

  where node
  

  • 결과: C:\Users\hyol1\AppData\Local\nvm\v20.18.2\node.exe.

---

2. 환경 변수 정리

1. 불필요한 경로 제거:
   • 제어판 > 시스템 > 고급 시스템 설정 > 환경 변수에서 Path 변수 수정.
   • C:\Program Files\nodejs 제거, 아래 경로만 유지:

     C:\Users\hyol1\AppData\Roaming\npm
     C:\Users\hyol1\AppData\Local\nvm
     C:\Users\hyol1\AppData\Local\nvm\v20.18.2
     

2. 중복 경로 정리:
   • C:\Users\hyol1\AppData\Roaming\npm이 중복되어 있던 문제 해결.

---

3. .npmrc 파일 수정

• 문제: .npmrc 파일에 잘못된 script-shell 설정이 포함되어 있었음.
• 조치:
  • .npmrc 파일 경로: C:\Users\hyol1\.npmrc.
  • 잘못된 설정 제거:

    script-shell=C:\Program Files\nodejs\node.exe
    

  • 최종 내용:

    prefix=C:\Users\hyol1\AppData\Roaming\npm
    

---

4. npx 및 npm 캐시 초기화

• npx 캐시 삭제:
• rm -rf C:\Users\hyol1\AppData\Local\npm-cache\_npx
• npm 캐시 초기화:
• npm cache clean --force

---

5. 정상 작동 확인

• 터미널에서 경로 확인:
• where node where npm where npx
• 기대 결과:
  • node: C:\Users\hyol1\AppData\Local\nvm\v20.18.2\node.exe.
  • npm: C:\Users\hyol1\AppData\Roaming\npm\npm.cmd.
  • npx: C:\Users\hyol1\AppData\Roaming\npm\npx.cmd.
• Vite 설치 정상 작동:
• npm create vite@latest my-project
• Yarn 설치 정상 작동:
• npm install -g yarn

---

결론

문제 원인

1. NVM으로 Node.js를 설치한 후에도 이전 Node.js 설치 경로(C:\Program Files\nodejs)가 환경 변수와 설정 파일에 남아 충돌 발생.
2. .npmrc에 잘못된 script-shell 설정이 남아 npm 및 npx 실행에 문제를 유발.
3. npx와 npm 캐시에 이전 경로가 남아 있었음.

---

해결 방법

1. NVM으로 Node.js를 설치하고 올바른 경로를 환경 변수에 추가.
2. .npmrc 파일을 수정하여 불필요한 설정 제거.
3. npm 및 npx 캐시를 초기화.
4. 환경 변수에서 중복 및 불필요한 경로 제거.

---

 

잘 읽히진 않지만... 이렇게 되겠습니다