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

[juancampuzano]

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]

can you remove the .svg extension in the import?

[juancampuzano]

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]

do you have typescript as dev dependency installed?

provide a minimal reproduction

[juancampuzano]

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

[userquin]

did you install unplugin icons dev dependency?

[juancampuzano]

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]

@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.