"Cannot find module" in VS Code

[samal-rasmussen]

Rollup and Svelte are importing the svg without error in the console and the svg is displayed in the browser and everything, but VS Code is complaining that it cannot find the svg. I have the "Svelte for VS Code" extension at v102.5.1.

[MKRhere]

Hi @samal-rasmussen, I understand the issue, but unsure how to fix this, since the plugin generates it at runtime. Still, can you make a stripped down sample repo that just reproduces the issue for me to test with?

[samal-rasmussen]

I made a minimal reproduction based on the default svelte template: https://github.com/samal-rasmussen/svelte-svg-import-minimal-reproduction

There is one initial commit with only the template that was pulled down with degit. And then one second commit with all my changes on top.

I'm not sure how the VS Code extension is supposed to pick up modules from custom rollup plugins. So I'm no help here either. But it seems to me that there is some integration between this plugin and the extension or the typescript tooling that needs to happen at some place.

[jasonlyu123]

This isn't an issue of a rollup plugin. You can add a definition to .svg so that typescript would know what is it.

// somename.d.ts
declare module "*.svg"

[samal-rasmussen]

Thanks a lot! That did the trick.

I understand why I expected that it had something to do with the editor extension now. It's because I'm new to Svelte and expected typescript errors to show up in the build output in the console. But all the typescript validation for Svelte really only exists in the editor extension as far as I understand it. The "validate": "svelte-check" npm script invokes the extension to do the typescript validation. If I do that then I see the error in the console.