VSCode: Svelte 5 project in the subfolder strikes errors when using @render & #snippets

[dkochetkov]

Describe the bug

My Svelte 5 project is located in a subfolder of the main project.
When I try to use @render or #snippet, I get an error message in VSCode.

Reproduction

mkdir parent
cd parent
npx sv create

◇  Where would you like your project to be created?
│  svelte
◆  Which template would you like?
│  ○ SvelteKit minimal
│  ● SvelteKit demo (showcase app with a word guessing game that works without JavaScript)
│  ○ Svelte library
└
◆  Add type checking with Typescript?
│  ○ Yes, using Typescript syntax
│  ○ Yes, using Javascript with JSDoc comments
│  ● No
└
◆  What would you like to add to your project? (use arrow keys / space bar)
│  ◻ prettier (https://prettier.io)
│  ◻ eslint
│  ◻ vitest
│  ◻ playwright
│  ◻ tailwindcss
│  ◻ drizzle
│  ◻ lucia
│  ◻ mdsvex
│  ◻ paraglide
│  ◻ storybook
└
◆  Which package manager do you want to install dependencies with?
│  ○ None
│  ● npm
│  ○ yarn
│  ○ pnpm
│  ○ bun
└

└  You're all set!

code .

open ./svelte/src/routes/+layout.svelte

Look at line 12> {@render children()} and find error:

Error: Unexpected character '@'js(-1)

Try to add any snippet into layout:

{#snippet ho()}
	<p>
		HOHOHO
	</p>
{/snippet}

Error: Expected if, each or awaitjs(-1)

Logs

No response

System Info

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M2
    Memory: 120.00 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v20.17.0/bin/npm
    pnpm: 9.1.4 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 130.0.6723.92
    Safari: 18.0.1


About Visual Studio Code:

Версия: 1.95.1 (Universal)
Фиксация: 65edc4939843c90c34d61f4ce11704f09d3e5cb6
Дата: 2024-10-31T05:14:54.222Z
Electron: 32.2.1
ElectronBuildId: 10427718
Chromium: 128.0.6613.186
Node.js: 20.18.0
V8: 12.8.374.38-electron.0
ОС: Darwin arm64 24.0.0

Svelte for VS Code
v109.1.0

Severity

annoyance

[DollarAkshay]

Is there any temporary workaround for this ?

I tried adding <!-- svelte-ignore -->, but that doesn't seem to work

[jasonlyu123]

A temporary workaround is to open VSCode where your package.json is or create a jsconfig.json in the same directory as the package.json.

{
    "extends": "./.svelte-kit/tsconfig.json"
}

This is different from sveltejs/svelte#13856. You can see the difference in the diagnostic. If there are only js(-1) and not svelte(parser-error), it's related to this issue. If they're both, it's more likely to be sveltejs/svelte#13856.

[dkochetkov]

A temporary workaround is to open VSCode where your package.json is or create a jsconfig.json in the same directory as the package.json.

{
    "extends": "./.svelte-kit/tsconfig.json"
}

Thanks, that's work for me! I created /parent/svelte/jsconfig.json and errors goes away.

UPD: Clicks on links to files imported from $lib have started working. Before the changes were made, links like $lib/ComponentName.svelte were inactive. This is a very nice addition to the solved problem!

[jasonlyu123]

Reopening to check if we can make it work without a jsocnfig.json. But if anyone using SvelteKit sees this, you should still create a jsconfig.json as it'll also improve the intellisense.