wobsoriano/svelte-sonner

Not working on SvelteKit 2 and Svelte 5

jramiroz98 opened this issue · 10 comments

jramiroz98 commented

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 commented

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.

  • 👍1
huntabyte commented

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.

  • 😕3
  • 👀1
GimpMaster commented

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...

image

  • 👍4
huntabyte commented

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 commented

That makes sense. Just wanted to report.

  • 👀4
pheuter commented

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

vexkiddy commented

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 :)

  • 👍4
wobsoriano commented

thank you for the update @vexkiddy !

hashproton commented

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);
  }
});
justinkwaugh commented

I have run into the same issue with toasts pre-toaster mount not being displayed. It would be great if any calls to toast() prior to Toaster being mounted would be cached and then run onMount