npm init vue , npm create vue@latest... - 인프런

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

프로젝트 구성

npm init vue , npm create vue@latest 명령 오류

작성

171

저는 이상하게 둘다 오류가 발생합니다.

Node버전이 22여서 20으로 바꿔서 해봐도 오류가 납니다.

> npx > create-vue node:internal/modules/esm/load:209 throw new ERR_UNSUPPORTED_ESM_URL_SCHEME(parsed, schemes); ^ Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:' at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:209:11) at defaultLoad (node:internal/modules/esm/load:107:3) at ModuleLoader.load (node:internal/modules/esm/loader:701:12) at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:514:43) at #createModuleJob (node:internal/modules/esm/loader:538:36) at #getJobFromResolveResult (node:internal/modules/esm/loader:306:34) at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:274:41) at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:577:25) { code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME' } Node.js v22.14.0 npm error code 1 npm error path C:\VueTemp npm error command failed npm error command C:\WINDOWS\system32\cmd.exe /d /s /c create-vue npm error A complete log of this run can be found in: C:\Users\xxxx\AppData\Local\npm-cache\_logs\2025-04-02T02_23_01_287Z-debug-0.log

어디가 문제일까요?

vue.js

답변 2

짐코딩

지식공유자

안녕하세요 🙂

이 오류는 최신 Node.js(버전 22)에서 ESM(ECMAScript Modules) URL 처리와 Windows 경로 시스템 간의 호환성 문제로 발생하고 있습니다. 특히 Windows의 드라이브 경로(c:)가 ESM URL 스키마로 제대로 해석되지 않아 문제가 발생하고 있는 것 같은데요.

오류는 보면 Node.js 버전 v22.14.0 을 사용하고 계신 것 같은데요.

Node 22 버전으로 시도해 보실 때 확인차 node -v 로 버전이 확실히 변경이 되었는지 확인해 보시겠어요?

콩메모

질문자

node -v 명령으로 확인해보니 v22.14.0 으로 나오고 있습니다. ㅜㅜ

짐코딩

지식공유자

아래 영상으로 Node 버전을 관리해보세요! 💪

[NVM 으로 Node.js 버전 관리하기]

콩메모

질문자

알려주신 nvm을 설치해서 버전 바꿔가면서 해봤는데도 마찬가지입니다.

참고로, 제 윈도우 컴퓨터에서는 nvm 명령이 좀 달랐습니다.

nvm ls available -> 버전 목록

nvm ls -> 설치된 버전 목록

nvm use 23.11.0 -> 설치된 버전 선택

nvm current -> 현재 선택된 버전 종류

인터넷으로 검색해보니 제가 가진 증상 좀 나오긴 하는거 같은데 마땅한 해결책은 못찾겠습니다. ㅜㅜ

짐코딩

지식공유자

Node.js 버전을 v20.x.x을 사용해 보시겠어요?
터미널을 cmder 프로그램을 활용해 보시겠어요?

콩메모

질문자

별별 방법 다 해도 안되다가 그냥 우연히 아래 명령으로 해보았습니다.

npm init vue@latest

그러니까 설치절차 비슷하게 나와서 그걸로 하니 프로젝트 폴더가 생성되어졌습니다.

콩메모

질문자

다른 노트북으로 하니 그냥 아무 문제없이 그냥 됩니다.

제 장비에 문제가 있나봅니다.

뭔가 꼬였나봅니다.

기회될 때 윈도우 새로 설치해서 해봐야겠습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 콩메모님.

제기하신 문제는 Node.js 및 npm의 버전과 윈도우 환경에서의 경로 설정 문제와 관련된 것으로 보입니다. 오류 메시지에 따르면, ERR_UNSUPPORTED_ESM_URL_SCHEME 오류는 ESM(ECMAScript Module) 로더가 file:// 등의 올바른 URL 스키마를 지원하지 않는 절대 경로를 인식할 수 없어서 발생합니다. 이는 일반적으로 ESM 모듈이 예상치 못한 방식으로 사용되거나 경로가 잘못 설정된 경우 발생할 수 있습니다.

문제를 해결하기 위한 몇 가지 단계는 다음과 같습니다:

Node.js 버전 확인 및 재설치: 최신 LTS 버전(예: 20.x)이나 안정적인 버전으로 Node.js를 설치해 보세요. ESM이 Node.js 최신 버전에서 더 잘 지원됩니다.
npx 환경 설정: npx 명령어를 사용할 때 절대 경로를 사용하는 대신 상대 경로를 사용하여 설치를 시도해 보세요.
npm 캐시 정리: npm 캐시가 손상되었을 수도 있으므로 아래 명령어를 사용해 정리하세요.
```
npm cache clean --force
```
ESM 지원 확인: Node.js ESM 지원과 관련하여 추가 구성 옵션이 필요할 수 있습니다. 프로젝트에서 type: "module"을 포함한 package.json 설정을 확인하거나, --experimental-modules 플래그를 사용해 보세요.
프로젝트 경로 확인: 경로에 한글이나 공백이 없다면, 영어로만 구성된 경로를 사용해 프로젝트를 생성해 보세요.

기존에 유사한 문제를 해결한 사용자가 올린 질문도 참고하시면 좋을 것 같습니다:

npm run dev 설치중에서는 막힌 문제 해결을 위한 환경 설정을 다루고 있습니다.

이 외에도 더 궁금한 점이 있거나, 추가적인 질문이 필요하다면 언제든 다시 남겨주세요. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

콩메모

질문자

버전 22도 LTS로 설치했었고, 20도 LTS로 했었습니다.

그리고, 프로젝트를 생성하려던 경로는 c:\VueTemp 경로인데, 한글이 없는 경로입니다.
npm cache clean --force 명령으로 캐시를 정리해보았는데, 마찬가지 오류가 발생합니다.

왜 기본설치 상태에서 실행에 오류가 발생하는지 모르겠습니다.

참고로, nodejs 설치할 때 필요한 프로그램을 자동으로 설치할지 옵션은 체크해서도 해보고 체크하지 않고도 해보고 했는데, 마찬가지 오류가 발생합니다.

인프런 커뮤니티 질문&답변

npm init vue , npm create vue@latest 명령 오류