Svelte 5: TypeError: null is not an object (evaluating 'metadata.parent') when assigning value to $bindable

[Torbet]

Describe the bug

Everything works as expected, until calling select on a result.

I get the error TypeError: null is not an object (evaluating 'metadata.parent') from get_owner when assigning place = result.

console.loging result gives me a Proxy({...result})

Tried with result.id and results.find(...) but same error, I think its localised to the actual assigning part.

Reproduction

<script lang="ts">
	let { place = $bindable() }: { place: Place | null } = $props();

	let query: string | null = $state(null);
	let results: Place[] = $state([]);

    $inspect(place)

	const search = async () => {
		if (!query || query.length < 3) return;

		const response = await fetch(`/api/places?q=${query}`);
		results = await response.json();
	};

	const select = (result: Place | null) => {
		place = result;
		query = null;
		results = [];
	};
</script>

<label class="input input-bordered flex items-center gap-2">
	<svg
		width="24"
		height="28"
		xmlns="http://www.w3.org/2000/svg"
		fill="none"
		viewBox="0 0 24 24"
		stroke-width="1.5"
		stroke="currentColor"
		class="opacity-70"
	>
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
		/>
	</svg>
	<input
		type="text"
		bind:value={query}
		oninput={search}
		placeholder="Search bars and pubs..."
		class="grow"
	/>
</label>

{#if results.length || place}
	<ul class="menu">
		{#if place}
			<li>
				<button onclick={() => select(null)} class="active flex flex-col items-start">
					<span class="font-bold">{place.name}</span>
					<span class="text-sm text-gray-500">{place.street}, {place.city}, {place.country}</span>
				</button>
			</li>
		{:else}
			{#each results as result}
				<li>
					<button onclick={() => select(result)} class="flex flex-col items-start">
						<span class="font-bold">{result.name}</span>
						<span class="text-sm text-gray-500"
							>{result.street}, {result.city}, {result.country}</span
						>
					</button>
				</li>
			{/each}
		{/if}
	</ul>
{/if}

Logs

`TypeError: null is not an object (evaluating 'metadata.parent')`

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 171.11 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.2 - /opt/homebrew/bin/node
    npm: 10.5.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 123.0.6312.124
    Safari: 17.4.1
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.107

Severity

annoyance

[Torbet]

Logging more info with $inspect, place successfully updates with the new data, but the error fires after and the page does not update like in svelte 4.

[Torbet]

Edit 2 @dummdidumm :

It's the $bindeable causing the issue! having a regular let test: Place | null = $state(null) and assigning to that works fine

[chainlist]

I have the same error using $state([]) so it might not be related that much to $bindable

[chainlist]

@dummdidumm I made a very minimal reproductible demo (without $bindable)

The buttons should be self-explenatory.

From what I understand, the error is raised when I try to edit one of the properties of an object stored in a rune that is itself passed as a $props() to a component.

[ChristopheCorbalan]

@dummdidumm I made a very minimal reproductible demo (without $bindable)

The buttons should be self-explenatory.

From what I understand, the error is raised when I try to edit one of the properties of an object stored in a rune that is itself passed as a $props() to a component.

@chainlist The issue appears as well without passing the rune object to another component — REPL

This issue started since [email protected].

[chainlist]

Indeed @ChristopheCorbalan.

I suspected as well it was from #11184