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

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

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

해결된 질문

작성

822

안녕하세요,

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

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

github issue를 보니 vite version 관련한 문제로 보인다, 4.0.0을 지원해달라 등의 이야기가 있습니다.
혹시 저와 같은 문제를 겪으신 분은 안계실까요?
이 때, vite 버전 문제 관련한 부분을 해결(?)한 사람이 있더라고요.
https://github.com/charrue/vite-plugin-vue-layouts
a. 원본을 fork한 이 것을 프로젝트에 설치해서 사용 시에 문제가 될까요?

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

스크린샷.png

vue.js firebase quasar algolia vue-3

답변 2

egpark

질문자

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

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

짐코딩

지식공유자

현재 실습코드 깃헙주소가 있다면 bruce.lean17@gmail.com 메일로 보내주실 수 있으세요?
없다면 node_modules 디렉토리 제거 후 프로젝트를 압축해서 bruce.lean17@gmail.com 메일로 보내주실 수 있으세요?

egpark

질문자

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

짐코딩

지식공유자

안녕하세요.

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

Repository clone

git clone https://github.com/adds-bug/vue3-firebase-app.git vue3-firebase-app-qna

VSCode에서 해당 프로젝트 열기
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"
  }
}

모듈 설치
```
npm i -D vite-plugin-vue-layouts
```
여기까지 해봤을때 문제가 없어요 🥲

PS.

node -v
v20.9.0
npm -v
10.1.0

짐코딩

지식공유자

안녕하세요 🙂

node_modules 디렉토리 제거
package-lock.json 파일 제거
여기서 강의 package.json 과 라이브러리 버전이 동일한지 다시 확인~!
의존성 모듈 다시 설치 - npm install
다시 실행 - npm run dev

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

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

질문자

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

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

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

짐코딩

지식공유자

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

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

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

짐작은 가능하겠죠?

해결되어 다행입니다 🙂

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

질문자

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

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

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

짐코딩

지식공유자

도움이 되어 다행입니다 🙂

행복한 주말 보내세요 👍

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

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