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

metaone11님의 프로필 이미지

작성한 질문수

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

Auto Page 설정 : unplugin-vue-router

Firebase 강의 Section1의 Auto page 설정에 관련되어

24.06.18 16:02 작성

·

122

0

  • 강의 내용대로 진행을 하였는데 아래와 같은 에러가 발생합니다.

질문6.png질문7.png

  • 순서는 아래와 같이 진행을 했습니다.

    질문1.png질문2.png질문3.png질문4.png

  • vitePlugins에서 조금 틀리게 나오지만 없는 부분은 주석 처리해서 해보았지만 같은 현상입니다.

    질문5.png질문8.png

 

 

답변 2

0

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

2024. 06. 18. 18:42

안녕하세요.

해결되어 다행이에요.

package.json에 설치하신 라이브러리 버전들이

강의시의 버전과 다를 경우에는 라이브러리들의 업데이트에 의해 강의시와 다르게 동작할 수 있습니다.

그렇기 때문에 혹시 강의시에 제공하는 소스버전과 다르다면 이 버전을 맞추고 Vue3 활용법을 익히시는 데 집중하시면 좋을 것 같습니다.

 

0

인프런 AI 인턴님의 프로필 이미지

2024. 06. 18. 16:07

안녕하세요, 인프런 AI 인턴입니다.

질문 내용과 제공된 이미지를 통해 확인한 바에 따르면, TypeError: Cannot read properties of undefined (reading 'forEach')라는 오류가 createRouterMatcher 함수에서 발생한 것으로 보입니다. 이는 vue-router 설정 중 발생한 이슈로 추정됩니다. 해당 오류는 보통 라우트를 정의하는 과정에서 예상치 못한 값이나 구조를 전달했을 때 나타날 수 있습니다.

오류가 발생한 부분이 vue-router 관련 설정임을 감안할 때, 다음 링크의 질문과 답변이 도움이 될 수 있습니다:

  • npm run build 시 오류 발생합니다
    • 이 링크에서는 Vite와 Quasar를 이용한 빌드 시 특정 파일을 찾지 못하는 문제에 대해 질문하고 있지만, 경로 오류나 파일 구조 문제와 같은 문맥에서 해결방안을 찾을 수 있습니다.

만약 위 링크가 직접적인 해결책을 제시하지 못한다면, 문제가 되는 부분인 vue-router의 설정과 관련해 다음 사항을 확인해보시기 바랍니다:

  1. 라우터 설정 파일(index.js)에서 경로 정의 부분을 확인하세요. 올바른 구조로 정의되었는지, 혹은 누락된 부분은 없는지 점검합니다.
  2. 사용 중인 vue-router 버전이 프로젝트에 적합한지 확인하세요. 때로는 버전 충돌이 문제의 원인이 될 수 있습니다.
  3. vue-router/auto 사용 시 올바르게 설정되었는지 확인합니다. 자동 경로 생성과 관련된 설정이 올바르게 적용되었는지 점검하세요.

질문자님의 상황을 해결하는 데 도움이 될 추가 정보나 코드가 필요하다면, 직접 코드를 공유하실 수 있는 인프런 커뮤니티를 통해 더 상세한 상황을 설명해 주시면 도움을 받을 수 있습니다.

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

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

2024. 06. 18. 16:14

build 는 이상 없이 되는 것을 확인했습니다.

imageimage

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

2024. 06. 18. 18:06

자체 해결했습니다.

아래와 같이 해야 에러가 없습니다. -는 삭제해야 하고 +는 추가해야 합니다.

-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router/auto'
+import { routes } from 'vue-router/auto-routes'

createRouter({
  history: createWebHistory(),
  // pass the generated routes written by the plugin 🤖
+  routes,
})