해결된 질문
작성
·
772
2
안녕하세요,
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 옵션을 두고 설치하는 것이 더 나은 선택일까요?
답변 2
0
안녕하세요.
제가 해당 프로젝트를 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
0
안녕하세요 🙂
node_modules
디렉토리 제거
package-lock.json
파일 제거
여기서 강의 package.json
과 라이브러리 버전이 동일한지 다시 확인~!
의존성 모듈 다시 설치 - npm install
다시 실행 - npm run dev
이렇게 다시 시도해 보시겠어요?
npm i vite@4.0.0
npm uninstall vite
npm install -D vite-plugin-vue-layouts
차례로 진행해보니 정상적으로 vite-plugin-vue-layouts이 설치..되네요..
이럴 때는 어떻게 받아들이는게 개발자로서 정신건강에 좋을까요..?..ㅎ.. 팁 좀 부탁드립니다..ㅎ
제가 일단 이전에 안됐는데 vite 버전 바꾸고 돼서 정신건강에 해롭다는 것이죠? ㅎㅎ
저기 위해 방금 답글 달았는데 이전에도 잘 ... 됐었어요. ㅎㅎ
다시한번 해보시겠어요?
제가 수강생 분의 코드를 테스트를 안됐었던 현상을 보지 못해서요. 🥲
상황이 해결된 것을 논리적으로 설명해 드릴 수가 없어요.
다만 코드를 보았을 때 vite-plugin-vue-layouts 해당 모듈이 아니라 @charrue/vite-plugin-vue-layouts 해당 모듈이 설치되어 있었습니다.
짐작은 가능하겠죠?
해결되어 다행입니다 🙂
그냥 지나칠까 하다가, 개인 메일로 이 이슈에 대한 제 생각을 전달할까 하다가, 이 글을 볼 다른 수강생을 위해 다시 정리합니다.
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. 강의설명 란에도 버전에 대해 언급을 하도록 하겠습니다. 감사합니다.
바쁘신 와중에 답변 주셔서 감사합니다.
vite-plugin-vue-layouts의 설치 시 버전을 지정하여 설치해야 했군요!
버전 충돌 시 어떤 방식으로 접근하는 것이 좋은지도 알려주셔서 감사합니다.
현재 실습코드 깃헙주소가 있다면 bruce.lean17@gmail.com 메일로 보내주실 수 있으세요?
없다면
node_modules
디렉토리 제거 후 프로젝트를 압축해서 bruce.lean17@gmail.com 메일로 보내주실 수 있으세요?