Subscribe on changes!

Circular components in Vue3 typescript + setup macro fail to build

avatar
Feb 24th 2022

Version

3.2.25

Reproduction link

github.com

Steps to reproduce

Try and build the project (npm run build) or open it with VSCode + Volar

What is expected?

The project is built without any errors

What is actually happening?

The compiler returns multiple errors stating that all properties didn't exist.


Running in dev mode works just fine.

avatar
Feb 25th 2022

Looks like cross-references are causing the problem. comment

<script lang="ts" setup>
// import A from './A.vue';

const props = defineProps<{ count: number }>()

</script>

<template>
    <!-- <A v-if="props.count > 0" :count="props.count-1" /> -->
    <li>B</li>
</template>

Will work properly.

avatar
Aug 11th 2022

I'm having a similar issue. According to the docs components can be recursive. But appears to be an issue when the recursion is circular. A -> B -> A vs A -> A -> A

https://vuejs.org/api/sfc-script-setup.html#recursive-components

Seems to build fine in my case. But VSCode shows lots of typescript problems.