Not working on SvelteKit 2 and Svelte 5

[jramiroz98]

I get the following errors until the imports are removed

Error when evaluating SSR module

CompileError: Expected a valid CSS identifier

loc: {
    line: 773,
    column: 39,
    file: '/path/to/Toaster.svelte'

[huntabyte]

We won't have full support for Svelte 5 until it is stable. Are you able to reproduce this with SvelteKit 2 and Svelte 4?

It sounds like a Svelte 5 issue considering its an error with compilation.

[huntabyte]

Update on this, there have been multiple reports of this with not only svelte-sonner, but also https://github.com/huntabyte/vaul-svelte, so it's definitely an issue with the Svelte 5 compiler.

[GimpMaster]

Just came here to say I got this issue with Svelte5 and Sveltekit 2

The toast shows up but just never goes away and console has all these messages...

[huntabyte]

Those are Svelte 5 issues which won't be officially supported until Svelte 5 is stable as it makes no sense to support something in alpha.

[GimpMaster]

That makes sense. Just wanted to report.

[pheuter]

I'm still getting a ERR_SVELTE_TOO_MANY_UPDATES error logged in the browser console on 5.0.0-next.69

[vexkiddy]

just incase others see this issue, but this was solved by updating svelte-5 to the latest version which is currently next.123 @pheuter @huntabyte. it should remove the 'too many updates' error :)

[wobsoriano]

thank you for the update @vexkiddy !

[hashproton]

Related to Svelte 5 and SvelteKit 2.0

How can I know when the Toaster component is mounted?

The <Toaster /> component is defined in +layout.ts.

I'm currently using the setTimeout workaround to ensure the toast is displayed correctly. Is there another approach to handle this, or is it a bug?

// +page.svelte
// This came from the server +page.server.ts
let { data } = $props();

let errors = $state(data.errors);

$effect(() => {
  if (errors) {
      // setTimeout is used to prevent the toast from being displayed before the toast component is rendered
      setTimeout(() => toast.error(errors[0].message, { duration: 5000 }), 100);
  }
});