循环引入导致的诡异问题

[WangJincheng4869]

Vue - Official extension or vue-tsc version

2.2.0

VSCode version

1.96.4

Vue version

3.5.13

TypeScript version

5.7.3

System Info

System:
    OS: Windows 10 10.0.26100
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 9.71 GB / 31.56 GB
  Binaries:
    Node: 22.11.0 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - D:\Users\jcwang\AppData\Roaming\npm\yarn.CMD
    npm: 10.4.0 - D:\Users\jcwang\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.86)
    Internet Explorer: 11.0.26100.1882

package.json dependencies

Steps to reproduce

几乎无法复现（在小型项目中模拟未出现），但知道是因为循环引入导致的问题（A 导入 B B 导入 A ，或者 A 导入 B B 导入 C C 导入 A），报错信息如下：

最终使用 defineAsyncComponent 的形式导入组件问题消失

What is expected?

希望循环引入时可以正常处理

What is actually happening?

出现了此错误

Link to minimal reproduction

No response

Any additional comments?

No response

[KazariEX]

缺少有效信息是解决不了问题的，如果无法复现可以考虑远程 https://github.com/vuejs/language-tools/wiki/Help-Us-Investigate-Issues-Remotely

[WangJincheng4869]

缺少有效信息是解决不了问题的，如果无法复现可以考虑远程 https://github.com/vuejs/language-tools/wiki/Help-Us-Investigate-Issues-Remotely

周末我尝试还原一下试试，目前已经通过 defineAsyncComponent 的形式解决了。

PS：能否在 tsc 命令上添加参数，输出 debug 日志？

[KazariEX]

你也可以下载一个 Volar Lab 扩展自己调试看看，把组件的虚拟代码粘到文件旁边，看看类型在哪里循环了。

[WangJincheng4869]

经过测试同样的代码在 2.1.10 中是没有这个问题的。

[KazariEX]

调查结果：

1. 组件自引用与模板引用（可通过使用文件名当自引用组件名解决）

   <script lang="ts" setup>
   import Main from './main.vue';
   
   declare module 'vue' {
       interface GlobalComponents {
           Comp: {};
       }
   }
   </script>
   
   <template>
       <Comp ref="comp" />
       <Main />
   </template>

2. 组件循环引用与模板引用

   <script setup lang="ts">
   // main.vue
   import { useTemplateRef } from 'vue';
   import Comp from './comp.vue';
   
   const comp = useTemplateRef('comp');
   //    ^? Readonly<ShallowRef<any>>
   </script>
   
   <template>
       <!-- skip $el -->
       <Comp ref="comp"></Comp>
   </template>

   <script setup lang="ts">
   // comp.vue
   import Main from './main.vue';
   </script>
   
   <template>
       <!-- skip $el -->
       <Main ref="main"></Main>
   </template>