Alert .toast() breaks Svelte components

[MerlinB]

This happens because the alert gets moved out of its position in the DOM leading to TypeError: Cannot read property 'removeChild' of null in Svelte when the parent component is destroyed. See sveltejs/svelte#6037.

[claviska]

This is by design and described in the docs:

To display an alert as a toast notification, or "toast", create the alert and call its toast() method. This will move the alert out of its position in the DOM and into the toast stack where it will be shown. Once dismissed, it will be removed from the DOM completely.

Moving the element is necessary to ensure "toast elements" render properly in the toast stack. Without this, the library would be responsible for messy positioning logic and susceptible to z-indexing conflicts (depending on the location of the alert in the DOM). Furthermore, consumers wouldn't be able to customize the toast stack with CSS since there wouldn't be a container in which the alerts collectively stack.

If you're using any framework that expects DOM elements to persist, you should create the alert outside of the app container and call toast() on them there. There's an example of creating toasts imperatively that appends them to document.body in case that helps.

As for the Svelte error — I'm sure they have their reasons for emitting an error instead of failing gracefully when a node no longer exists, but if you expect it to work as-is it would need to be mitigated in Svelte.