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

egpark님의 프로필 이미지

작성한 질문수

Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)

Auto Layout 설정 : vite-plugin-vue-layouts

vite-plugin-vue-layouts 종속성 충돌 관련

해결된 질문

작성

·

772

2

안녕하세요,

vue-plugin-vue-layouts 설치 시 종속성 충돌 관련 에러가 발생합니다.

(node 및 npm, 그리고 package.json 내용 모두 강좌와 동일하게 진행중입니다.)

 

  1. github issue를 보니 vite version 관련한 문제로 보인다, 4.0.0을 지원해달라 등의 이야기가 있습니다.
    혹시 저와 같은 문제를 겪으신 분은 안계실까요?

  2. 이 때, vite 버전 문제 관련한 부분을 해결(?)한 사람이 있더라고요.
    https://github.com/charrue/vite-plugin-vue-layouts
    a. 원본을 fork한 이 것을 프로젝트에 설치해서 사용 시에 문제가 될까요?


    b. a 방법보다는, 원본에 --force 옵션을 두고 설치하는 것이 더 나은 선택일까요?

 

 

스크린샷.png

답변 2

0

egpark님의 프로필 이미지
egpark
질문자

빠른 답변을 주셔서 감사합니다!

5번으로 넘어갈 수가 없습니다. 질문글에서 드렸던 종속성 충돌 에러가 동일하게 발생합니다..!

짐코딩님의 프로필 이미지
짐코딩
지식공유자

  • 현재 실습코드 깃헙주소가 있다면 bruce.lean17@gmail.com 메일로 보내주실 수 있으세요?

  • 없다면 node_modules 디렉토리 제거 후 프로젝트를 압축해서 bruce.lean17@gmail.com 메일로 보내주실 수 있으세요?

egpark님의 프로필 이미지
egpark
질문자

메일 드렸습니다. 감사합니다.

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요.

제가 해당 프로젝트를 clone 해서 vite-plugin-vue-layouts 패키지를 설치했는데 이상 없시 설치되었습니다.

 

  1. Repository clone

     

    git clone https://github.com/adds-bug/vue3-firebase-app.git vue3-firebase-app-qna
  2. VSCode에서 해당 프로젝트 열기

  3. package.json에서 @charrue/vite-plugin-vue-layouts 제거

{
  // ... 생략 ...
  "devDependencies": {

    "@quasar/app-vite": "^1.4.3",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-vue": "^9.14.1",
    "postcss": "^8.4.14",
    "prettier": "^2.8.8",
    "unplugin-vue-router": "^0.6.4"
  },
  "engines": {
    "node": "^18 || ^16 || ^14.19",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}
  1. 모듈 설치

    npm i -D vite-plugin-vue-layouts

     

    여기까지 해봤을때 문제가 없어요 🥲

    PS.

node -v
v20.9.0
npm -v
10.1.0

0

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요 🙂

  1. node_modules 디렉토리 제거

  2. package-lock.json 파일 제거

  3. 여기서 강의 package.json 과 라이브러리 버전이 동일한지 다시 확인~!

  4. 의존성 모듈 다시 설치 - npm install

  5. 다시 실행 - npm run dev

이렇게 다시 시도해 보시겠어요?

egpark님의 프로필 이미지
egpark
질문자

npm i vite@4.0.0

npm uninstall vite

npm install -D vite-plugin-vue-layouts

 

차례로 진행해보니 정상적으로 vite-plugin-vue-layouts이 설치..되네요..

 

이럴 때는 어떻게 받아들이는게 개발자로서 정신건강에 좋을까요..?..ㅎ.. 팁 좀 부탁드립니다..ㅎ

 

스크린샷 2023-12-08 15.54.00.png스크린샷 2023-12-08 15.54.22.png

짐코딩님의 프로필 이미지
짐코딩
지식공유자

제가 일단 이전에 안됐는데 vite 버전 바꾸고 돼서 정신건강에 해롭다는 것이죠? ㅎㅎ

 

저기 위해 방금 답글 달았는데 이전에도 잘 ... 됐었어요. ㅎㅎ

다시한번 해보시겠어요?

egpark님의 프로필 이미지
egpark
질문자

아, vite는 설치 후 삭제를 바로 진행했기 때문에

결과적으로 vite 버전은 바꾸지 않았는데

상황이 해결된 것이 논리적으로 이해가 되지 않아서요..!

 

 

짐코딩님의 프로필 이미지
짐코딩
지식공유자

제가 수강생 분의 코드를 테스트를 안됐었던 현상을 보지 못해서요. 🥲

상황이 해결된 것을 논리적으로 설명해 드릴 수가 없어요.

다만 코드를 보았을 때 vite-plugin-vue-layouts 해당 모듈이 아니라 @charrue/vite-plugin-vue-layouts 해당 모듈이 설치되어 있었습니다.

짐작은 가능하겠죠?

해결되어 다행입니다 🙂

egpark님의 프로필 이미지
egpark
질문자

그냥 지나칠까 하다가, 개인 메일로 이 이슈에 대한 제 생각을 전달할까 하다가, 이 글을 볼 다른 수강생을 위해 다시 정리합니다.

package.json에 @charrue/vite-plugin-vue-layouts 모듈이 있었던 것은 문제 상황과 관련이 없습니다.

해당 이슈를 가진 다른 유저들이 vite-plugin-vue-layouts github의 issue에서 해결책으로서 제안한 것을 시도해본 것일 뿐입니다.

당연히 위에서 강사님이 제시해주신 작업(npm i 재시도) 시에는 해당 모듈은 포함되지 않은 package.json이어야 겠죠. 물론 저도 그러했고요.

다른 모두가 문제가 없었기 때문에 문제가 아닐 것이라고 정의해버리는 것은 좀 아쉬운 답변 아닐까 하는 생각이 듭니다.

이런 저런 시행착오 중 vite@x.x.x를 설치/삭제 후 해당 모듈이 dependency conflict 없이 정상 설치 된 것에 대해 논리적으로 이해가 안된다는 제 질문에 대한 답이, '내가' 하면 정상 작동하기 없었기 때문에 설명할 수 없다에서 그친 게 개인적으로 아쉽습니다.

 

vue3 기본, 실전 그리고 quasar 강좌까지 모두 수강하며 고마운 마음 가지고 있습니다. 이번에 새로운 강좌가 등록되었길래, 이직한 회사에 한 번 적용해볼까 하는 마음으로 수강하고 있습니다.

제가 꾸준히 짐코딩님의 강좌를 수강하는 건 해당 기술에 대해 참 자세한 설명을 함께 해주신다는 점이 컸습니다.

다만 오늘 받은 답변은 제 기대가 컸던 것인지.. 조금 아쉬운 마음이네요.

짐코딩님의 프로필 이미지
짐코딩
지식공유자

"다른 모두가 문제가 없었기 때문에 문제가 아닐 것이라고 정의해버리는 것은 좀 아쉬운 답변 아닐까 하는 생각이 듭니다."

이렇게 느끼셨다면 정중히 사과드리겠습니다.

현재 업무가 너무 많아 🥲 답변을 잠시 후에 할까 고민을 하다가 오류로 인해 수강생 분이 다음 진도를 못나가실 것 같아 ㅠ 최대한 빨리 오류를 해결해 드리려고 최대한 빨리 답변을 드리다 보니 수강생분의 궁금해 할 수 있는 상황을 미쳐 생각하지 못했네요.

불편한 감정을 겪게해드려서 다시한번 정중히 진심으로 사과드립니다.

감사합니다!

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요. 다시 답변 드리겠습니다.
우선 저도 제가 발생하지 않는다고 하여 문제가 아니라고 생각하지 않습니다 🥲 (오해하지 않아 주셨으면 합니다 🙏)

 

우선 이 에러의 원인을 최대한 설명드리고자 에러를 재현해 보았고 package.json, package-lock.json, node_modules 디렉토리를 살펴봤습니다.


에러가 난 원인)

이 에러는 종속성 해결과정에서 발생한 충돌로 인한 문제입니다. 에러 메시지를 보면

1. vite-plugin-vue-layouts 0.9.1 모듈을 설치하려고 하는데, 종속성 해결과정에서 충돌이 발생했습니다.

2. 현재 프로젝트의 vue3-firebase-app의존성 모듈 중 하나인 @quasar/app-vite 모듈이 vite@^2.9.13 버전을 사용하고 있음.

3. 하지만, vite-plugin-vue-layouts@0.9.1 모듈이 vite@^4.0.0 || ^5.0.0 버전을 필요로 함.

4. 이러한 버전 충돌로 인해 종속성을 해결할 수 없어 에러가 발생함.


해결방법1)

vite 모듈을 업그레이드 하면 됩니다. 제가 위에 설명드린 방법으로 재설치를 해보니 vite 버전이 v5.0.6으로 설치되어 종속성 문제가 해결되었던 것입니다.

해결방법2)

vite-plugin-vue-layouts 모듈을 다운그레이드 하면 됩니다. 버전호환에 맞는 모듈로 설치해서 진행해보니 정상 설치 되는것을 확인하였습니다.

vite-plugin-vue-layouts v0.8.0


그렇다면 이 에러가 왜 발생되었는가?

결론을 말씀 드리면 강의에서 사용한 버전은 vite-plugin-vue-layouts v0.8.0 버전입니다.

강의 중 package.json

  "devDependencies": {
    "@quasar/app-vite": "^1.4.3",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-vue": "^9.14.1",
    "postcss": "^8.4.14",
    "prettier": "^2.8.8",
    "unplugin-vue-router": "^0.6.4",
    "vite-plugin-vue-layouts": "^0.8.0"
  },

우선 이러한 유형의 질의가 올라오면 제가 가장먼서 package.json 강의 버전과 현재 버전을 확인하는 편이나 버전을 동일하게 설정 하신것으로 판단하여 그 부분을 의심하지 못했습니다.

버전이 아니고서는 정말 설명할 수 있는 부분이 없어서요. 그래서 급하게 답변 드린다는게 오해를 불러 일으킨거 같습니다. 🥲

우선 제 업무 제쳐두고 다시 답글 달아드려요. 🥹

불편했던 감정, 논리적으로 이해가지 않았던 감정 털어버리고 화이팅하셨음 합니다 💪

감사합니다!

PS. 강의설명 란에도 버전에 대해 언급을 하도록 하겠습니다. 감사합니다.

egpark님의 프로필 이미지
egpark
질문자

바쁘신 와중에 답변 주셔서 감사합니다.

vite-plugin-vue-layouts의 설치 시 버전을 지정하여 설치해야 했군요!

버전 충돌 시 어떤 방식으로 접근하는 것이 좋은지도 알려주셔서 감사합니다.

짐코딩님의 프로필 이미지
짐코딩
지식공유자

도움이 되어 다행입니다 🙂

행복한 주말 보내세요 👍

egpark님의 프로필 이미지

작성한 질문수

질문하기