[Vue warn]: Failed to resolve component: ... If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement

문제 상황

- 환경: vue3, nuxt: 3.12.4

Vue에는 폴스루 속성(Fallthrough Attributes)이 존재하는데 해당 속성을 사용해서 타입선언 없이 부모 컴포넌트에서 받아온 props와 emit을 그대로 자식 컴포넌트에게 전달하고자 했다.

<!-- ArrowLinkButton -->
<script setup lang="ts">
import LinkButton from '~/components/LinkButton.vue';
</script>
<template>
  <LinkButton v-bind="$attrs" v-on="$listeners">
      <slot/>
  </LinkButton>
</template>

 

이 경우 개발자 콘솔에서 아래와 같은 warnning 문구가 발생한다. 

원인 파악

Vue3 마이그레이션 가이드에 따르면 $listener는 Vue3에서 제거되었다고 한다.

기존의 $attrs에 Event listeners가 포함되는 형태이다.

 

해결 방법

아래와 같이 defineProps로 타입정의 후 v-bind="$props" 또는 v-bind="$attrs"로 부모 컴포넌트로 받은 props를 내려준다.

!-- ArrowLinkButton  -->
<script setup lang="ts">
import LinkButton from '~/components/LinkButton.vue';
import type { LinkButtonProps } from '~/types/common/LinkButton';
defineProps<LinkButtonProps>();
</script>
<template>
  <!-- v-bind="$props"도 동일한 결과 -->
  <LinkButton v-bind="$attrs">
      <slot/>
  </Button>
</LinkButton>

 

다만 아래와 lang="ts"인 script에서 아래와 같이 props 타입이 다른 컴포넌트를 폴스루하게 되면 에러가 해결되지 않는 경우가 있다.

<!-- ArrowLinkButton -->
<script setup lang="ts">
import LinkButton from '~/components/LinkButton.vue';
</script>
<template>
  <!-- v-bind="$props"도 동일한 결과 -->
  <LinkButton v-bind="$attrs">
      <slot/>
  </LinkButton>
</template>

 

이 경우는 해결방법에서 작성한 것과 같이 Props로 타입을 내려주면 해결되는 듯 하다.

 

---

Reference

Vue3 中使用 $listenersv-on with no argument expects an object value_v-on with no argument expects an object value.-CSDN博客