unplugin-vue-components: Typescript: component types does not function correctly when unplugin-auto-import is present

Describe the bug

I just started a fresh project with npm init vue@latest. I installed the plugin latest version and noticed the components are typed as any:

any

Investigating, I thought it could be the new version type change and downgrading to go back to @vue/runtime-core seemed to work again.

However, I noticed the new unplugin-vue-components release did work properly at some point and then stopped. The only other change I did was to also install unplugin-auto-import. And that is what is causing the problem, removing the plugin and deleting the auto-imports.d.ts types made unplugin-vue-components work properly, and the components be correctly typed:

typed

Reproduction

https://github.com/rafael-lua/bug-unplugin-vue-components

System Info

System:
    OS: Linux 5.10 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-3470 CPU @ 3.20GHz
    Memory: 11.38 GB / 12.45 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm

Used Package Manager

npm

Validations

Follow our Code of Conduct
Read the Contributing Guide.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
The provided reproduction is a minimal reproducible of the bug.

About this issue

Original URL
State: open
Created a year ago
Reactions: 1
Comments: 21 (5 by maintainers)

Most upvoted comments

Same issue here! Thanks for the tip, I explicitly include files, so I only had to change the order in tsconfig.json so that the AutoImport typings are included after the components, like so

"include": [
    "components.d.ts",
    "auto-imports.d.ts",
    "src/**/*.ts",
]

+18

4350pChris on Jun 23, 2023

@rafael-lua , in your AutoImport config inside vite.config.ts, you can set dts to something like zzzauto-imports.d.ts and it will work. I guess it takes them in alphabetic order.

Alejandro-SB on Jun 22, 2023

Same issue here! Thanks for the tip, I explicitly include files, so I only had to change the order in tsconfig.json so that the AutoImport typings are included after the components, like so同样的问题在这里！感谢您的提示，我明确包含文件，所以我只需要更改顺序， tsconfig.json 以便在组件之后包含自动导入类型，如下所示
"include": [
    "components.d.ts",
    "auto-imports.d.ts",
    "src/**/*.ts",
]

我通过配置这个顺序解决了问题…

tree-white on Sep 11, 2023

@wenfangdu

Upgraded, and unfortunately the issue still persists. But instead of any, it shows unknown.

unknown

rafael-lua on Jun 17, 2023

See if there is "element-plus/global" in tsconfig.json > compilerOptions > types, if so, you can delete it

lincenying on Jun 12, 2023

@wenfangdu

In this case, the code would be duplicated, no? Well, I tried changing here, but no results. Tried to remove as well, no good. However, removing the other block and leaving only the @vue/runtime-core, works:

// auto-imports.d.ts
// I removed this:
declare module 'vue' {
  interface ComponentCustomProperties {
  }
}

rafael-lua on Jun 10, 2023