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.

[JoshuaHintze]

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.

[JoshuaHintze]

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 !

[whysocket]

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]

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

[travisdmathis]

Working for me in Svelte 5(199)/Sveltekit 2 w/ shadcn-svelte

Untitled.11.mp4

[vdawg-git]

I get that this is not supported but I still want to share my error using the latest SvelteKit and Svelte versions with shadcn-svelte as it is a bit weird.

It used to work and then suddenly stopped:

error when starting dev server:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /home/vdawg/dev/svelte-app/node_modules/.pnpm/svelte-sonner@0.3.28_patch_hash=qmucmacpy3wtadjbwhodwlsq3u_svelte@5.0.0-next.264/node_modules/svelte-sonner/dist/Loader.svelte
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:218:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:244:36)
    at defaultLoad (node:internal/modules/esm/load:122:22)
    at async nextLoad (node:internal/modules/esm/hooks:748:22)
    at async nextLoad (node:internal/modules/esm/hooks:748:22)
    at async Hooks.load (node:internal/modules/esm/hooks:385:20)
    at async handleMessage (node:internal/modules/esm/worker:199:18)
 ELIFECYCLE  Command failed with exit code 1.

[satanskitty]

I get that this is not supported but I still want to share my error using the latest SvelteKit and Svelte versions with shadcn-svelte as it is a bit weird.

It used to work and then suddenly stopped:

error when starting dev server:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /home/vdawg/dev/svelte-app/node_modules/.pnpm/svelte-sonner@0.3.28_patch_hash=qmucmacpy3wtadjbwhodwlsq3u_svelte@5.0.0-next.264/node_modules/svelte-sonner/dist/Loader.svelte
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:218:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:244:36)
    at defaultLoad (node:internal/modules/esm/load:122:22)
    at async nextLoad (node:internal/modules/esm/hooks:748:22)
    at async nextLoad (node:internal/modules/esm/hooks:748:22)
    at async Hooks.load (node:internal/modules/esm/hooks:385:20)
    at async handleMessage (node:internal/modules/esm/worker:199:18)
 ELIFECYCLE  Command failed with exit code 1.

For anyone running into this issue, I've managed to fix it for now by including "svelte-sonner" in the optimizeDeps option in vite.config.ts.
Like so:

export  default  defineConfig({
   plugins: [sveltekit()],
   optimizeDeps: {
   	include: ['svelte-sonner']
   }
});