Multiple VSCode extension fallback config issues

[Jojoshua]

I am just getting started with svelte. I am using VSCode and the official extension.

It works great at home but at work I am getting module resolution issues and it's taken hours to get to the bottom of it. I started looking at the vscode logs and noticed...No svelte.config.js found. Using https://github.com/sveltejs/svelte-preprocess as fallback

This brings up some questions

1. At work GitHub is blocked. Can a fallback config be bundled into the extension instead?
2. Even with verbose logging the logs did not indicate there was a failure pulling the fallback config
3. Where exactly is the default svelte.config.js file this attempt to download?

[jasonlyu123]

We didn't try to download a config. The log is not saying we were downloading from the GitHub repo. It's just linking the repository so it's more clear what exactly we using. The fallback config is bundled.

In a lot of cases, a custom svelte.config.js isn't needed. But if you have a custom config about preprocessing, you do need it. What exactly are the module resolution issues you're seeing? Maybe you do need a custom config file.

You can read the docs to see if your problem is a common issue. Otherwise, we need a reproducible to know what exactly is the problem you're encountering.

[Jojoshua]

I have been trying to reproduce on my home machine and cannot. I can explain the setup though just in case you have any insight.

I am using typescript and when I type a .svelte import, the editor provides a "Cannot find module ABC/App.svelte or its corresponding type declarations" error

I then tried adding a global.d.ts file with the contents of / / / < reference types="svelte" / >

This made that error go away but still not getting good types.

For example, hovering over an import (while in a .ts file)
import App from 'ABC/App.svelte' will now just show module "*.svelte"
and the reference to the component is generic and shows this instead of the good type definitions and props are not typed either.

(alias) new App(options:IComponentOptions<Record<string,any>>): App
import App

When I view the App.svelte component and hover over for example an on:click property then it will show me the good definitions from the extension.

Any ideas?

[jasonlyu123]

This is because typescript doesn't deal with the svelte files. We have a tsserver plugin that can address this issue. It's not on by default. You can enable it with the svelte.enable-ts-plugin config. And if you have any feedback on it you can check out #580

I am going to close this as it seems like we have found the problem and corresponding solution.

[jasonlyu123]

So the problem now is that the typescript plugin doesn't seem to work in your work machine? What is the version of typescript and vscode you're using? Also, can you check the ts server log following the instruction here and see if there are any logs with a Svelte Plugin preset?

[Jojoshua]

I am using typescript 4.6.2. I was using vscode 1.64.0 and taking note of that I just updated to 1.65.2 and it's now working better. Thank you for following up!