Circular component import breaks types

[gu-stav]

Vue - Official extension or vue-tsc version

2.1.10

VSCode version

2.1.10

Vue version

3.5.13

TypeScript version

5.6.3

System Info

System:
    OS: macOS 15.1.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 96.86 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.3.0 - ~/.nvm/versions/node/v22.3.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.3.0/bin/npm
    pnpm: 8.14.1 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 131.0.6778.140
    Edge: 131.0.2903.99
    Firefox Nightly: 135.0a1
    Safari: 18.1.1

package.json dependencies

{
  "dependencies": {
    "radix-vue": "^1.9.11",
    "vue": "^3.5.13",
    "vue-router": "^4.4.5"
  },
  "devDependencies": {
    "@tsconfig/node22": "^22.0.0",
    "@types/jsdom": "^21.1.7",
    "@types/node": "^22.9.3",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vitejs/plugin-vue-jsx": "^4.1.1",
    "@vitest/eslint-plugin": "1.1.10",
    "@vue/eslint-config-prettier": "^10.1.0",
    "@vue/eslint-config-typescript": "^14.1.3",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.7.0",
    "eslint": "^9.14.0",
    "eslint-plugin-vue": "^9.30.0",
    "jsdom": "^25.0.1",
    "npm-run-all2": "^7.0.1",
    "prettier": "^3.3.3",
    "typescript": "~5.6.3",
    "vite": "^6.0.1",
    "vite-plugin-vue-devtools": "^7.6.5",
    "vitest": "^2.1.5",
    "vue-tsc": "^2.1.10"
  }
}

Steps to reproduce

1. Clone + install the attached reproduction (create-vue app)
2. Navigate to src/components/List.vue

What is expected?

1. v-model:open="isOpen": isOpen is expected to be of type boolean
2. emit('branch:click')": emit is expected to be typed

What is actually happening?

1. isOpen is of type {}

2. emit is of type {}

Link to minimal reproduction

https://github.com/gu-stav/vue-tsc-circular-reproduction

Any additional comments?

As soon as you remove <Sublist @branch:click="() => emit('branch:click')" />, isOpen is properly typed:

I was not able to reproduce it, but in our app the above works until we upgrade from: "vue-tsc": "^2.1.6", "typescript": "^5.5.4", to "vue-tsc": "^2.1.10", "typescript": "^5.6.3"

[wrong-g]

loop？

[KazariEX]

workaround: add a comment node around the root element of the recursively called component's template.

// Sublist.vue
<template>
  <!-- avoid circular reference -->
  <List />
</template>

It will cause references to the root element type to be skipped.

[Acetyld]

Same here, also happens when we do InstanceType in a helper.

[KazariEX]

The next version will disable the type inference for $el and $refs by default.

See: #5135.