Toasts are appearing unstyled

[finestgecko]

I've been having some problems setting up svelte-french-toast in my application, which uses Svelte with Inertia and Webpack 5 (via Encore).

When I invoke a toast, there is no styling:

I'm using this code:

<script>
import { onMount } from 'svelte';
import toast, { Toaster } from 'svelte-french-toast';

onMount(() => {
    toast.success("Hello, world!");
})
</script>

<Toaster />

I'm not really sure how to go about debugging this further since this is my first project with Svelte. There are no errors in the console.

[kbrgl]

The issue, most likely, is that the styles from the Svelte component aren't being properly injected into the page. Do you have any of your own Svelte components in your code, and are their styles being correctly rendered?

I would also suggest looking through the docs for svelte-loader: https://github.com/sveltejs/svelte-loader#extracting-css

[kbrgl]

I don't have much experience with Inertia, but from a cursory read over the docs, it seems somewhat unlikely that that's where the problem lies. It's more likely that there's an issue with the Webpack configuration that's causing the CSS not to be put in the right place.