Vue error when using vue-tsc - Type '{}' is not assignable to type 'ComponentProps<string>'

juancampuzano commented 3 months ago

Describe the bug

I have configured vue-tsc in a vue project and after running the validation I got an error.

How to reproduce the issue

<script setup lang="ts"> section

import UnpluginCloseChip from "~icons/unplugin/close-chip.svg";

<template> section

 <UnpluginCloseChip />

File tsconfig.json


{
...
"compilerOptions": {
"skipLibCheck": true,
"types": ["vite/client", "unplugin-icons/types/vue"],
},
...
}


- File `package.json`
``` javascript
...
  "scripts": {
     "check-types": "vue-tsc --noEmit",
  },
 "devDependencies": {
    "unplugin-vue-components": "^0.26.0",
    "vue": "~3.2.45",
  },
...

After running the following command yarn check-types I am getting the following error.

Type '{}' is not assignable to type 'ComponentProps<string>'.
  Type '{}' is not assignable to type 'string'.

44       <UnpluginCloseChip />
          ~~~~~~~~~~~~~~~~~

Reproduction

Vue error when using vue-tsc

System Info

System:
    OS: macOS 14.3
    CPU: (10) arm64 Apple M1 Max
    Memory: 111.53 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.14.0 - ~/.nodenv/versions/18.14.0/bin/node
    Yarn: 1.22.19 - ~/.nodenv/versions/18.14.0/bin/yarn
    npm: 9.3.1 - ~/.nodenv/versions/18.14.0/bin/npm
  Browsers:
    Brave Browser: 122.1.63.161
    Safari: 17.3

Used Package Manager

yarn

Validations

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

userquin commented 3 months ago

can you remove the .svg extension in the import?

juancampuzano commented 3 months ago

Now I got this error:

error TS2307: Cannot find module '~icons/unplugin/close-chip' or its corresponding type declarations.

5 import UnpluginCloseChip from "~icons/unplugin/close-chip";
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

userquin commented 3 months ago

do you have typescript as dev dependency installed?

provide a minimal reproduction

juancampuzano commented 3 months ago

Yes I have typescript: "typescript": "~4.9.4",. I will create the reproduction env.

userquin commented 3 months ago

did you install unplugin icons dev dependency?

juancampuzano commented 3 months ago

Yes, I did. I ran this: yarn add -D unplugin-icons. The application is running ok but the only problem is the validation with vue-tsc

juancampuzano commented 3 months ago

@userquin The problem was that I was using a very old version of the library "vue-tsc": "~1.0.24"

I am using "vue-tsc": "~1.8.27" and now is working fine.

unplugin / unplugin-icons