vue-tsc --noEmit show error when using Svg as component

[ndh103]

Vue Language Features (Volar) version v0.27.27 TypeScript Vue Plugin (Volar) version v0.27.27

I am using https://github.com/jpkleemans/vite-svg-loader to load svg file as component

import ArrowLeftIcon from '@/assets/arrow-left-icon.svg?component' usage in template

<div class="app-action-link" @click="goBack()">
      <ArrowLeftIcon class="h-4 w-4 inline-block" /> back
    </div>

vue-tsc show error in <ArrowLeftIcon

JSX element type '__VLS_9' does not have any construct or call signatures.ts(2604)
(property) ArrowLeftIcon: Component<any, any, any, ComputedOptions, MethodOptions>

my tsconfig

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "strictNullChecks": false,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

[GMKR]

Create components.d.ts file (https://github.com/johnsoncodehk/volar#using) in src folder.

In my case it is autogenerated by unplugin-vue-components in root folder, including it in tsconfig.json worked for me.

here is my tsconfig

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "paths": {
      "~/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "components.d.ts"]
}

[ndh103]

I've tried and it is not working for me. Reference to the other issue in Volar here also with the version 0.27.27 https://github.com/johnsoncodehk/volar/issues/547

[sapphi-red]

Using DefineComponent instead of Component with declare module '*.svg?component' worked for me.

[ndh103]

@johnsoncodehk This is still not working with version 0.27.28

@sapphi-red can you tell in more detail? in what find you make changes?

[sapphi-red]

Instead of adding /// <reference types="vite-svg-loader" /> to src/vite-env.d.ts, I added

declare module '*.svg?component' {
  import { DefineComponent } from 'vue'
  const src: DefineComponent
  export default src
}

to it.

[ndh103]

@sapphi-red thank you, it works like a charm!