Svelte for VS Code v102.5.0 / svelte-check 1.1.09 Breaks TS support in .svelte files when style tag present below

[ConnorJamesLow]

Describe the bug
Imports and markup-interop type-hints break in .svelte files for version 102.5.0.

• Hovering over js variables in markup (e.g. <div>{obj.value}</div>) provides no type hints.
• No property suggestions when trying to autocomplete in markup.
• False positives with ts errors in <script lang="ts">.
• False positives with component import errors (in some cases).

Reverting back to v102.4.0 fixes these issues: code --install-extension svelte.svelte-vscode@102.4.0.

To Reproduce
Install svelte.svelte-vscode@102.5.0. Compare to svelte.svelte-vscode@102.4.0.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

• No property suggestions when trying to autocomplete:
  
• False positives with ts errors:
  
• False positives with component imports (in some cases):
  

System (please complete the following information):

• OS: Windows
• IDE: VSCode 1.50.1, x64
• Plugin/Package: Svelte for VSCode

Additional context
To be clear, my app runs as expected, it looks to be entirely a tooling issue.

[dummdidumm]

Do you have a minmum code snippet that reproduce this for you, more specifically, a code snippet where the "unexpected token" error happens (my guess is all the other errors are because of that)? I cannot reproduce it given your description.

[bradak1]

With svelte-check 1.1.8

> svelte-check --output=machine
1604601599943 START "<my-path>"
1604601605719 COMPLETED 36 FILES 0 ERRORS 0 WARNINGS 10 HINTS

With svelte-check 1.1.9

> svelte-check --output=machine
1604601792022 START "<my-path>"
1604601797435 ERROR "src/components/employee/Employees.svelte" 10:18 "Unexpected token"
1604601797435 COMPLETED 36 FILES 1 ERRORS 0 WARNINGS 9 HINTS

The line in question just defines a variable with a type:
let newEmployee: EmployeeDto;

[MichealPearce]

I too am receiving unexpected typescript errors with the latest update. So far, it has been only with imports. All have the same error, but are usually not the same lines between files. You can see here it marks the * as the error, other files mark { or other parts in the import line.

[MichealPearce]

If someone is looking for a work-around:

• ctrl+,
• Search extensions.autoUpdate and disable it
• Open the terminal and revert the plugin to v102.4.0 with code --install-extension svelte.svelte-vscode@102.4.0
• Wait for it to install & reload

Don't forget to re-enable auto-updates later

[dimfeld]

Looks like a PR just came in but in case it still helps, here's the smallest example I could get to reproduce reliably:

<script context="module" lang="typescript">
  class Control {
    el: string;
  }
</script>

<script lang="typescript">
</script>

[dummdidumm]

This should be fixed with Svelte for VS Code 102.5.1 / svelte-check 1.1.10

[jankalfus]

Could we add a test for this to prevent stuff like this in the future? I'd love to do it, but I couldn't find any tests in this repo, maybe you can give me a hint.

Just some background: I'm new to Svelte and I've spent about 2-3 hours trying to figure out what was going on. First, the svelte extension broke after I reloaded vs code (which I didn't realize at that time), and then svelte-check stopped working after I reinstalled all the packages (which I also didn't realize at that time). I couldn't google anything or find anything in the troubleshooting guide for svelte-check, since this is apparently the first time something like this happened. Not a great experience. For somebody coming from React, a great typescript experience is a must. I was about to ditch Svelte for good :(

[dummdidumm]

I added a test with the fix which you can see in the commit. Threatening to leave is not helping.

[jankalfus]

Awesome, I missed that it's already included in the commit :)

BTW I'm not "threatening", I was merely trying to describe a situation it got me into and how it made me feel, that's all.