Type error

[richardtallent]

Hi,

Thanks for this loader! I'm using it in Vue 3 with TypeScript, and I'm getting the following Vetur warning in VS Code for each SVG in the line that says something like components: { MyLogo }:

No overload matches this call.
  The last overload gave the following error.
    Type 'string' is not assignable to type 'Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>'

Is there a way to inform TypeScript that the result of that import { MyLogo } from "mylogo.svg" will, in fact, be a Component, not a string?

Everything still works fine, it's just a red-squiggly issue.

[richardtallent]

I just figured out that this issue also breaks Intellisense for typescript for the entire template (every reference to a prop, computed, etc. has type never, so accessing properties/methods of those then creates more red-squiggly errors).

As workaround, here's what I've had to do (maybe there's a better way?) so the site.name reference doesn't break:

<template>
    <div>
        <MyLogo/>
        <p>{{ site.name }}</p>
    </div>
</template>
<script lang="ts">
import { defineComponent, Component } from "vue"
import MyLogoSvg from "../assets/logo.svg"
// I still get a type error below casting string to component, but this fixes the template issue
const MyLogo: Component = MyLogoSvg

export default defineComponent({
    name: "MyPage",
    components: { MyLogo },
    setup() {
        return {
            site: {
                name: "Richard",
            }
        }
    },
})
</script>

[jpkleemans]

Hi, thanks for posting the issue.

I've added a type definition file to v1.3.0. You'll need to add it to your tsconfig.json:

{
  "compilerOptions": {
    "types": ["vite-svg-loader", "vite/client"]
  }
}

This will solve the string warning. I can't reproduce your Intellisense issue. Could you please try if v1.3.0 also solves those warnings?

[gabrielchiquini]

hi, maybe vite/client types is conflicting with your declaration in Vite 2. I'm getting this error

10   export default src
                    ~~~

  node_modules/vite/client.d.ts:130:18
    130   export default src
                         ~~~
    'src' was also declared here.

node_modules/vite/client.d.ts:130:18 - error TS2300: Duplicate identifier 'src'.

130   export default src
                     ~~~

  node_modules/vite-svg-loader/index.d.ts:10:18
    10   export default src
                        ~~~
    'src' was also declared here.

Found 2 errors.

I don't know if you can override, but Vite 2 provide types for svg. Doc: https://vitejs.dev/guide/features.html#client-types

[guastallaigor]

Hello. Can we please reopen this issue or maybe open a new one? I'm also getting the error above. Any workarounds are appreciate (except skipLibCheck: true) :smile:.

[jpkleemans]

@guastallaigor Hi! When do you get the error? When building the app? Have you tried the new way of defining the type definitions: https://github.com/jpkleemans/vite-svg-loader#use-with-typescript

[guastallaigor]

Hey @jpkleemans , thank you for the fast response. Yes, it's when I'm building the app, other than that it is working great. I think I only tried adding the types inside the tsconfig.json. I will try later today the new way and let you know here. Thank you.

[mseele]

I tried both ways and non of them work. I got the errors, too.

[guastallaigor]

Same here, not sure what to do, right now I'm using skipLibCheck: true, but would be great if we can find a way to fix it

[EdwardKerckhof]

@jpkleemans this can be solved by removing the module declaration of "*.svg" since Vite comes with this type definition already.

For now if anyone is facing this issue, you can manually delete the module declaration in 'node_modules/vite-svg-loader/index.d.ts'.

Module declaration: declare module '*.svg' { import { Component } from 'vue' const src: Component export default src }

[jpkleemans]

@EdwardKerckhofZoneDev the default Vite type definition for svg files is string. So when I remove the module declaration I get the error Type 'string' is not assignable to type 'Component'.

Don't you get that error when running npm run build?

[jpkleemans]

This is fixed in version 2.0.3. You'll need to use the ?component param when importing your svg files in a TypeScript project:

import MyIcon from './my-icon.svg?component'

[Fredymax]

Add to file tsconfig.json the key types

"compilerOptions": {
    "types": ["vite-svg-loader", "vite/client"]
 }

then, add to import svg import MySvg from "@/path/some.svg?component