Question about @const

[motherthestate]

I've encountered this issue a few times now and im not sure if this is expected behavior so I'm making a discussion instead of opening an issue for now.

When using @.const inside an #if the value seems to sometimes not respect the condition, or at least seems to be updated out of order with the check. In the snippet below it is possible to get an error like "Cannot read properties of undefined (reading 'items')" when ok becomes false or openThing becomes undefined. Even though the check should make this type safe and this would not happen in normal JS if clause.

// +layout.server.ts
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = async ({ url }) => {
  const show = url.searchParams.get('show');
  if (show) {
    return {
      openThing: { ok: true as const, items: [1, 2, 3] }
    };
  }
  return {openThing: undefined};
};

<!-- +layout.svelte -->
<script lang="ts">
  let { data, children } = $props();
</script>
{@render children()}
{#if data.openThing && data.openThing.ok}
  {@const items = data.openThing.items}
  <p>{items.length}</p>
{/if}

[brunnerh]

This does sound like a bug. Similar to e.g.:

• Re-rendering occurs before the execution of the #if directive. svelte#16072

If you can create a reproduction in the Svelte playground, I would recommend opening an issue about this (in the Svelte repository, not SvelteKit).

This does not sound SvelteKit-specific, but if it can only be reproduced via Kit, then it might be related to SSR & hydration. Make sure to update everything to the latest version.

[motherthestate]

@brunnerh Gonna open an issue, on further inspection, no pun intended. The issue seems to be $inspect. https://svelte.dev/playground/bda582387f424db190fa30d51c5334e0?version=latest

[motherthestate]

Here is the issue