[@vue/compiler-sfc] Failed to resolve extends base type.

[bogdan0083]

Hey guys! I'm trying to create a wrapper for Accordion component. First I create a wrapper for AccordionRoot:

<template>
  <div>
    <AccordionRoot v-bind="delegatedProps" :class="cn('text-gray-700', props.class)">
      <slot></slot>
    </AccordionRoot>
  </div>
</template>
<script setup lang="ts">
import { AccordionRoot, type AccordionRootProps } from 'radix-vue';
import { type HtmlHTMLAttributes, computed } from 'vue'
import { cn } from '~/lib/utils';

interface Props extends  AccordionRootProps {
  class?: string 
}

const props = withDefaults(defineProps<Props>(), {})
console.log(props)

const delegatedProps = computed(() => {
  const {class: _, ...delegatedProps} = props

  return delegatedProps
})

</script>

This code throws the error:

[@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

/Users/bgdn0083/projects/nuxt-playground/components/Accordion/Root.vue
11 |  import { cn } from '~/lib/utils';
12 |  
13 |  interface Props extends  AccordionRootProps {
   |                           ^^^^^^^^^^^^^^^^^^
14 |    class?: string 
15 |  }

Here's a link to repro: https://stackblitz.com/edit/nuxt-starter-khh4kd?file=components%2FAccordion%2FRoot.vue. It also throws this error.

What am I doing wrong?

Thanks!

[zernonia]

You need to install typescript as deps

https://stackblitz.com/edit/nuxt-starter-qrfh9f?file=package.json

[bogdan0083]

Thank you very much, it helped ❤️

[zernonia]

You're welcome!!