[Vuejs] setup function returned a promise, but no <Suspense> boundary was found in the parent component tree

 

뷰 개발 환경에서 만날 수 있는 경고문구 입니다.

setup function returned a promise, 
but no <Suspense> boundary was found in the parent component tree

 

라우터 기반의 환경에서 라우팅 되어야 할 컴포넌트에 setup 부분에 반환 형태가 promise 인 경우 해당 경고문구와 함께 아무것도 뜨지 않을 수 있습니다.

* 대상 : 샘플 vue 파일

이런식으로 setup 부분에 async가 있는 경우..

 

이때 라우팅하는 파일에 keepAlive 노드를 붙여주믄 해당 문제는 해결 가능 합니다.

          <router-view v-slot="{ Component, route }">
              <div :key="route.name">
                <KeepAlive>
                  <Suspense>
                    <component :is="Component"></component>
                  </Suspense>
                </KeepAlive>
              </div>
          </router-view>