Unexpected character @

[DDuran19]

Describe the bug

I am getting this error Unexpected character '@'svelte(parse-error) when using @render I am not sure if this is svelte5 problem or probably my IDE, or extension? please help...

Reproduction

<script lang="ts">
	import NewOrder from './this/NewOrder.svelte';
	import { newOrderModal } from './this/stores';

	let { data, children } = $props();
	const branches = data.branches;
</script>

{#if branches && branches.length !== 0}
	<NewOrder {branches} />
{/if}
{#if children}
	{@render children()}
{/if}

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i3-10105 CPU @ 3.70GHz     
    Memory: 647.48 MB / 7.83 GB
  Binaries:
    Node: 20.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (130.0.2849.52)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    svelte: ^5.1.0 => 5.1.0

Severity

annoyance

[jasonlyu123]

This is most likely because you updated from Svelte 4 to Svelte 5 and the language server still has the cache from loading the Svelte 4. In that case, just restart the editor. Another possibility is that you have workspace trust set to untrust. In that case, the local Svelte 5 compiler won't be loaded and you'll have to trust the workspace for it to work.

[DDuran19]

Yes, that's exactly what I did, I updated from svelte 4 to svelte 5 (restarting editor didn't work tho, maybe I will need to delete some stuff) Thanks for this, I will do your suggestion later, but will mark this as closed. thanks man @jasonlyu123

[Antonio-Bennett]

@DDuran19 are you using Houdini graphql client? If so you need to update it to the latest version or at least until svelte 5 support was added. I was also receiving this error. If you comment it out in your vite config plugins that error would go away

[DollarAkshay]

@DDuran19 you should not have marked this as completed as this is an issue with the language tools (VSCode Plugin)

It has now been reported here: sveltejs/language-tools#2557 (comment)

[jasonlyu123]

As previously mentioned, this usually is because the language server already loaded the compiler from svelte 4. You just need to restart the editor in this case. We'll look into sveltejs/language-tools#2557 separately. Please be patient.

[DDuran19]

@DDuran19 you should not have marked this as completed as this is an issue with the language tools (VSCode Plugin)

It has now been reported here: sveltejs/language-tools#2557 (comment)

Hey sorry man, been busy with lots of things. My issue was eventually fixed by deleting .svelte-kit, .vscode and node modules (restarting vscode didnt work for me) I guess its because of cache thing like what they say. Perhaps an improvement could be made such that on upgrade, it invalidates the cache.. not sure how to implement it

[jasonlyu123]

If you need to delete node_modules or lock file that is more likely because some of the packages only accept svelte 4 so you didn't actually successfully update to svelte 5. "Cache invalidation" won't help in this case.

[DDuran19]

If you need to delete node_modules or lock file that is more likely because some of the packages only accept svelte 4 so you didn't actually successfully update to svelte 5. "Cache invalidation" won't help in this case.

Not Actually sure if I had to honestly, I didn't test it one at a time, I just gave it a go. but on another project, I just tried, I only needed to delete .svelte-kit and restart vscode

but I always put overrides on my package json cause of the conflicts with other dependencies

[justingolden21]

Restarted VS Code, updated every plugin, deleted node_modules and reinstalled, deleted .svelte-kit folder, still have this problem.

Can't for the life of me figure out why. The code runs fine, but it shows the entire file and every folder containing it as erroring in VS Code.

[jasonlyu123]

@justingolden21, your case is likely sveltejs/language-tools#2557 (linked above). If you're not using SvelteKit like sveltejs/language-tools#2557, you can create a jsconfig.json with something like this

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "target": "ESNext",
    "module": "ESNext",
    "verbatimModuleSyntax": true,
    "isolatedModules": true
  },
  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}

[justingolden21]

@jasonlyu123 thank you! sveltejs/language-tools#2557 (comment) worked great for me. Lifesaver!

[justingolden21]

Ran into this error again migrating a different project. The config change didn't work. Closing vs code and deleting the .svelte-kit folder didn't work. When I tried running pnpm i then it failed, so I shift deleted all node_modules and installed again and ran dev. The error finally changed from "unexpected character @" to "$settings is an illegal variable name", but I'm using the same svelte 4 store that worked fine when I migrated other projects, and it's also saying all of my components are types now, which it didn't before ('Icon' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled)

EDIT: commenting out everything that binds to any svelte store, and then running:

pnpm remove @sveltejs/kit @sveltejs/adapter-auto @sveltejs/vite-plugin-svelte svelte vite

pnpm add -D svelte@latest @sveltejs/kit@latest vite@latest @sveltejs/vite-plugin-svelte@latest
pnpm add -D @sveltejs/adapter-auto@latest
pnpm add -D typescript@latest svelte-check@latest

to update seemed to at least ifx most (but not all) issues

Now I get UnknownReferenceError: Card is not defined:

import Card from '$lib/components/common/Card.svelte';

<Card>

Same as it has always been and no reason it shouldn't work.

EDIT 2:

SOVLED IT by deleting these lines from my svelte.config.js:

preprocess: [
		preprocess({
			postcss: true
		})
	]