SvelteToast is not a valid SSR component

[Iuriy-Budnikov]

I'm getting this error with sveltekit ssr

<SvelteToast> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules.

[zerodevx]

This component historically works with SSR. Could you help check by installing the previous minor:

$ npm i --save-exact @zerodevx/svelte-toast@0.7.2

and see if the error still happens?

[Iuriy-Budnikov]

This component historically works with SSR. Could you help check by installing the previous minor:

$ npm i --save-exact @zeroodevx/svelte-toast@0.7.2

and see if the error still happens?

Yeah, I'm getting the same error.

[zerodevx]

It's likely due to the deprecation of svelte field that landed in SvelteKit a few days ago. Looks like I'll have to split the package into two - one for Svelte, and one for vanilla JS.

[Grandnainconnu]

Temporary workaround:

<script lang="ts">
	import { onMount } from 'svelte';

	import type { SvelteToast } from '@zerodevx/svelte-toast';

	let toast: typeof SvelteToast;

	onMount(() => {
		import('@zerodevx/svelte-toast').then(({ SvelteToast: component }) => (toast = component));
	});
</script>

{#if toast}
	<svelte:component this={toast} />
{/if}

<slot />

[jrmoynihan]

It's likely due to the deprecation of svelte field that landed in SvelteKit a few days ago. Looks like I'll have to split the package into two - one for Svelte, and one for vanilla JS.

That is indeed part of the reason. I just started patching this in some other packages/forks I use. You can save a lot of headaches by using SvelteKit itself to create the components and then just running the built-in svelte-package command to do all the work for you when it comes to creating the correct package.json, exporting types, and ensuring SSR compatibility. It makes staying up-to-date with the changing API a lot more seamless.

I'm not sure how that would play for the vanilla JS consumers of this package, but I don't frequently see a lot of comments/issues from those users, so that's an encouraging sign.

[zerodevx]

@Grandnainconnu thanks for the gist. 🙏

@jrmoynihan thanks for the recommendation. Migrating to svelte-package is indeed the immediate next step. Will take the opportunity to release the next major as well; deprecate outdated stuff, refactor some code, migrate e2e tests to playwright, implement enhancements logged in issues, etc - hopefully I can start this sooner rather than later.

Because of this change, svelte consumers of this package now picks up the compiled code rather than the svelte definitions and it's incredibly inefficient.

I'm not sure how that would play for the vanilla JS consumers of this package, but I don't frequently see a lot of comments/issues from those users, so that's an encouraging sign.

Personally, I use the vanilla compiled code for some projects - but it's not complicated to publish a vanilla build as well.

[zerodevx]

As a matter of priority, SvelteKit consumers of this package should install the latest RC with the @next tag:

$ npm i --save-exact @zerodevx/svelte-toast@next

This stop-gap release migrates the existing stable codebase v0.8.2 as-is to svelte-package, which then SvelteKit will be able to correctly pick out; otherwise, the compiled code is used instead, and that's a bad thing.

This buys us some time while I migrate the tests, update the demo, refactor the codebase, and add some new stuff for v1.

[Iuriy-Budnikov]

@zerodevx

Now I'm getting an error

Cannot find module 'node_modules/@zerodevx/svelte-toast/stores' imported from node_modules/@zerodevx/svelte-toast/index.js
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'node_modules/@zerodevx/svelte-toast/stores' imported from node_modules/@zerodevx/svelte-toast/index.js

[zerodevx]

How did you get the error? I just loaded v1.0.0-rc.1 in a new SvelteKit clean install and works.

https://stackblitz.com/edit/sveltejs-kit-template-default-7kksrr?file=src/routes/+layout.svelte