Svelte and TS errors when importing svgs

[plitarko]

If I use ?component I get this:

If I remove ?component I get this:

Also had to import the vite Plugin type to make this plugin work. Everything works now despite these errors, but how can I fix them? Thanks for you help!

[poppa]

I have no idea of your setup, but try giving this a try. Change the *.svg?component-typing to this:

declare module '*.svg?component' {
  const content: ConstructorOfATypedSvelteComponent
  export default content
}

Let me know if that helps?

[poppa]

I've made a new release where I think this issue may be solved.

Feel free to re-open this issue if the problem persists.

[tcherokee]

Hello,

I am having a similar issue to this. I have added

declare module '*.svg?component' {
	const content: ConstructorOfATypedSvelteComponent
	export default content
}

but I am still getting an error with it

I am not sure what I am missing?

[poppa]

Hi @tcherokee. Perhaps you'r on an old version of SvelteKit? Either upgrade or change the type to any.

Hope that helps.

[coldino]

I'm not sure why, but putting the declare module '*.svg?component' section in app.d.ts isn't working for me as I still get Cannot find module with an import like $lib/images/dev.svg?component. I have other things in the app.d.ts that DO work as expected - for example a session added to App.Locals.

Experimenting a little, I found putting it in a .d.ts beside the .svelte file works. In my case this is my global +layout.svelte and the declaration works if it lives in +layout.d.ts.

Of course this is unlikely to be caused by an issue in this library, but does anyone know the cause, and do the docs here need to be updated?

[poppa]

Tanks for the message @coldino, very much appreciated.

In my personal opinion there are too many moving parts when it comes to a project and how TS and type-resolution etc is setup, that it feels more or less like a guessing-game getting all these things to work 😂

Now, if anyone makes a PR with more sensible defaults, I'll be the first to merge it ☺️

[miguelcobain]

Also looking for solutions. @coldino your workaround does work, indeed.

[woss]

i created the ./src/ambient.d.ts file then added the declare stuff inside and it worked without any issues. Having it in the app.d.ts doesn't work, I confirm.

[Porter-smith]

i installed with bun add --dev @poppanator/sveltekit-svg and got this issue. I think maybe bun doesn't add the typing (idk). I just added the type to app.d.tsand that worked for me

declare module '*.svg?component' {
  const content: ConstructorOfATypedSvelteComponent
  export default content
}

[poppa]

i installed with bun add --dev @poppanator/sveltekit-svg and got this issue. I think maybe bun doesn't add the typing (idk). I just added the type to app.d.tsand that worked for me

declare module '*.svg?component' {
  const content: ConstructorOfATypedSvelteComponent
  export default content
}

@Porter-smith Did you try this? https://github.com/poppa/sveltekit-svg/#typescript

[Porter-smith]

Oh I see ! I didn't realize it had that thank you !