How to override vite/client types?

[korywka]

If you declare types for SVG to import it as Svelte Component:

declare module '*.svg' {
	import type { ComponentType, SvelteComponentTyped } from 'svelte'
	import type { SVGAttributes } from 'svelte/elements'

	type Constraint = SVGAttributes<SVGSVGElement>
	const content: ComponentType<SvelteComponentTyped<Constraint>>

	export default content
}

VSCode anyway will see types from vite/client and treat SVG as string.

Any idea how to fix (override) it?

This solution doesn't work: https://vitejs.dev/guide/features.html#client-types

PS: #12276

[korywka]

One way to fix this is to add query params, but it looks like hack:

https://github.com/poppa/sveltekit-svg#svelte-usage

[nsarrazin]

Did you end up finding a solution for this ? 👀

[korywka]

Nope 😞

[evenfrost]

Don't forget to add the file with overrides before the vite/client line in the reference file (in my case it was a vite-env-d.ts file in the root project folder). Without this it won't work even if you add the *.svg declaration to the .d.ts file.

My vite-env-d.ts looks like this:

/// <reference types="./types/shims.d.ts" />
/// <reference types="vite/client" />

And SVG files are being properly cast as Components (and not strings anymore).

[CatStudioApp]

Thank you so much! This helps my React project as well!

[tiagowalbrinch]

I'm passing through this same issue, I set up my vite-env-d.ts the same way, and it still doesn't work, how is configured your tsconfig.json?

[korywka]

Who have same issue please upvote #12276

[jeron-diovis]

It saved my day, thank you.

You can't directly declare your modules before vite/client – because it breaks TS rules, referenced files won't work then.
But you can add other refences before ones to override – and this works fine.
All of this is accordingly to docs and should be pretty obvious – but somehow feels so strange and convoluted.