Vue 3 프로젝트 실행 시 yarn serve 오류 (yarn is not installed)

Vue 3 프로젝트 실행 시 yarn serve 명령어가 안 되는 문제

Node.js, npm, yarn 버전은 다음과 같다.

$ node -v
v20.15.0

$ npm -v
10.7.0

$ yarn -v
1.22.22

 

2024-07-02 기준 LTS 버전인 Node.js를 설치하여 Vue 프로젝트를 생성하였다.

그 외에 별다른 건 하지 않았다.

 

C:\minvroot\Learn-Vue-JS-3 (main -> origin)
$ vue create vue3-cli

Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)

Vue CLI v5.0.8
✨  Creating project in C:\minvroot\Learn-Vue-JS-3\vue3-cli.
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.22
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...

success Saved lockfile.

�  Invoking generators...
�  Installing additional dependencies...

yarn install v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
Done in 4.71s.
⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project vue3-cli.
�  Get started with the following commands:

 $ cd vue3-cli
 $ yarn serve

 

vue create vue3-cli 명령어를 입력하여 vue3-cli 프로젝트를 생성하였다.

안내에 나온 대로 vue3-cli 디렉터리로 이동하여 yarn serve를 하였으나 서버 절대 실행 안됨

 

npm으로는 잘 실행돼서 npm으로 하면 되긴 했으나 괜히 오기 생겨서 열심히 (지피티랑 같이) 알아봤다.

 

C:\minvroot\Learn-Vue-JS-3 (main -> origin)
$ cd vue3-cli

C:\minvroot\Learn-Vue-JS-3\vue3-cli (main -> origin)
$ yarn serve
yarn run v1.22.22
$ vue-cli-service serve
 INFO  Starting development server...


 DONE  Compiled successfully in 3410ms                                                         오후 3:19:36

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.74.221.106:8080/

 ERROR  Error: The project seems to require yarn but it's not installed.
Error: The project seems to require yarn but it's not installed.
    at checkYarn (C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\@vue\cli-shared-utils\lib\env.js:46:43)
    at exports.hasProjectYarn (C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\@vue\cli-shared-utils\lib\env.js:42:10)
    at C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\@vue\cli-service\lib\commands\serve.js:330:34
    at Hook.eval [as callAsync] (eval at create (C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:44:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\tapable\lib\Hook.js:18:14)
    at Watching._done (C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\webpack\lib\Watching.js:309:28)
    at C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\webpack\lib\Watching.js:224:21
    at Compiler.emitRecords (C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\webpack\lib\Compiler.js:1048:5)
    at C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\webpack\lib\Watching.js:200:22
    at C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\webpack\lib\Compiler.js:1010:14
    at Hook.eval [as callAsync] (eval at create (C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:12:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\tapable\lib\Hook.js:18:14)
    at C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\webpack\lib\Compiler.js:1007:27
    at C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\neo-async\async.js:2818:7
    at done (C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\neo-async\async.js:3522:9)
    at Hook.eval [as callAsync] (eval at create (C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\webpack\lib\Compiler.js:834:33
    at Immediate._onImmediate (C:\minvroot\Learn-Vue-JS-3\vue3-cli\node_modules\memfs\lib\volume.js:637:13)    at process.processImmediate (node:internal/timers:478:21)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

 

챗지피티가 말하기를, vue-cli-service가 프로젝트에서 yarn을 필요로 하지만 yarn이 설치되지 않았다고 인식하는 상황입니다. yarn이 제대로 설치된 것처럼 보이지만, vue-cli-service가 이를 인식하지 못하는 문제가 있을 수 있습니다. 라고 한다.

 

시도해 본 것과 GPT가 확인하라 했지만 이미 되어있던 것

1. npm, yarn 캐시 삭제하고 yarn 재설치 (yarn global 설치)
   • yarn 재설치 시 -g 옵션 주었으나 안된다.
   • yarn init 시도해 보았으나 안된다.
2. Path 환경 변수 설정
   • Node.js 설치 시 자동으로 npm 환경 변수가 설정되어서 할 필요 없었다.
3. package.json 확인
   • vue 프로젝트 생성 시에 yarn이 설치되므로 package.json 파일 내 @vue~ 관련 설정은 잘 설정되어 있다.
4. cmd 관리자 모드로 실행하기
   • 현재 cmder 프로그램을 사용하고 있는데 관리자 모드로 실행해서 vue 프로젝트를 재구축해도 안된다.

슬프다. ChatGPT 4o도 해결하지 못함

 

해결방안

Error: The project seems to require yarn but it's not installed

스택오버플로우를 참고하여 해결했다.

단순히 공부용으로 만들어보는 vue 프로젝트이므로 추가적으로 다른 걸 시도해보진 않을 것이다. 위 삽질을 하느라 이미 하루를 허비했다.

 

env.js 파일에 process.env.VUE_CLI_TEST = true를 추가하면 된다.

Vue 프로젝트 폴더 > node_modules > @vue > cli-shared-utils > lib > env.js

위 경로를 따라가거나 전체 검색으로 VUE_CLI_TEST를 검색하면 나온다.

 

가장 윗 줄 변수 선언 부에 한 줄을 추가했다.

process.env.VUE_CLI_TEST = true

22년도에 달린 답변이던데 왜 지피티는 가져오지 못했을까

 

참고로 스택오버플로우 답변은 .env 파일에 VUE_CLI_TEST=true를 넣는 것이다.

 

 

이대로 끝내기엔 아쉬워서 (챗지피티와 함께) 조금 더 자세히 알아보았다.

console.log로 찍어보니 서버 실행 시 process.env.VUE_CLI_TEST 값이 undefined로 내려온다.

 

해당 값은 환경 변수 VUE_CLI_TEST를 참조하는 것으로, Node.js 애플리케이션이 실행되는 환경에서 설정된 값을 의미한다. 이 값은 Vue CLI에 의해 설정되지 않고 개발자나 특정 환경에서 직접 설정한다.

따라서 env.js에 true를 넣어주는 게 편법은 아닌 것으로 생각된다. 그러나 지피티는 VUE_CLI_TEST 환경 변수가 Vue CLI의 일반적인 설정에서 사용되지 않는다는데.. (?)

 

env.js 파일에 직접 선언하지 않고 다른 방법으로도 위 에러를 해결할 수 있다.

 

1. cmd에서 VUE_CLI_TEST 환경 변수 true 값으로 설정하기

$ set VUE_CLI_TEST=true

환경 변수 설정하는 거라 등호 양 옆으로 띄어쓰기가 들어가면 안 된다.

위 방법의 단점은 터미널 창을 끄고 다시 키면 설정한 환경 변수 값이 없어진다는 것이다. 그래서 작업 중인 에디터를 껐다 킬 때마다 매번 환경 변수를 다시 설정해주어야 하는 번거로움이 있다.

 

2. package.json 내에 VUE_CLI_TEST 환경 변수 설정 넣어주기

"scripts": {
    "serve": "set VUE_CLI_TEST=true && vue-cli-service serve",
    ... (중략)
}

yarn serve 할 때마다 환경 변수를 설정해 준다.

 

제일 깔끔해 보이는 env.js 파일 수정 방법으로 진행하였다.