Cannot read properties of null (reading 'SmuiElement') in SvelteKit with Snackbar

[jdgamble555]

Describe the bug I updated to the latest version and I get this error while using Snackbar:

TypeError: Cannot read properties of null (reading 'SmuiElement')
    at CommonLabel.svelte:35:23
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1871:22)
    at Object.default (/src/components/message.svelte:42:95)
    at eval (/node_modules/@smui/snackbar/dist/Snackbar.svelte:210:36)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1871:22)
    at eval (/src/components/message.svelte:27:103)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1871:22)
    at eval (/src/routes/+layout.svelte:42:95)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1871:22)
    at root.svelte:41:37
Cannot read properties of null (reading 'SmuiElement')
TypeError: Cannot read properties of null (reading 'SmuiElement')
    at CommonLabel.svelte:35:23
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1871:22)
    at Object.default (/src/components/message.svelte:42:95)
    at eval (/node_modules/@smui/snackbar/dist/Snackbar.svelte:210:36)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1871:22)
    at eval (/src/components/message.svelte:27:103)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1871:22)
    at eval (/src/routes/+layout.svelte:42:95)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1871:22)
    at root.svelte:41:37
Cannot read properties of null (reading 'SmuiElement')
TypeError: Cannot read properties of null (reading 'SmuiElement')
    at CommonLabel.svelte:35:23
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1871:22)
    at Object.default (/src/components/message.svelte:42:95)
    at eval (/node_modules/@smui/snackbar/dist/Snackbar.svelte:210:36)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1871:22)
    at eval (/src/components/message.svelte:27:103)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1871:22)
    at eval (/src/routes/+layout.svelte:42:95)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1871:22)
    at root.svelte:41:37

And message.svelte

<script lang="ts">
    import Snackbar, { Actions, Label } from '@smui/snackbar';
    import IconButton from '@smui/icon-button';
    import { snackbar, snackmsg } from '$lib/stores';
</script>

<Snackbar bind:this={$snackbar} labelText={$snackmsg} timeoutMs={4000}>
    <Label />
    <Actions>
        <IconButton class="material-icons" title="Dismiss">close</IconButton>
    </Actions>
</Snackbar>

Expected behavior No errors or 500 Server Error.

Additional context Work around is to check for browser:

{#if browser}
    <Message />
{/if}

But this should be done internally, potentially have a pseudo document object on serverside.

J

[NickantX]

The snackbar store is undefined until the client-side router kicks in to bind the component instance to the store. This is expected behavior from Svelte and unrelated to SMUI.

[raythurnvoid]

This is a duplicate of https://github.com/hperrin/svelte-material-ui/issues/524

[jdgamble555]

@NickantX - This is not expected. Other UI Frameworks work fine in SvelteKit without having to crash.

[hperrin]

I believe this is caused by an incorrect TypeScript configuration. I have no issues with using SMUI in SvelteKit, and the demo site is all done with SvelteKit's SSR. I'm going to close as a duplicate of #524. We can discuss there.

[jdgamble555]

You can close this for me. I have done so many changes since this was open, but seems to be fixed when I remove the check for browser now. I have no idea how if got fixed.

Thanks for getting back to this package!

J

[raythurnvoid]

Most likely fixed vite side.