runtime error when trying to bind: to non-bindable prop

packages/svelte/src/compiler/phases/3-transform/client/utils.js

@@ -5,7 +5,8 @@ import {
 	PROPS_IS_LAZY_INITIAL,
 	PROPS_IS_IMMUTABLE,
 	PROPS_IS_RUNES,
-	PROPS_IS_UPDATED
+	PROPS_IS_UPDATED,
+	PROPS_IS_BINDABLE
 } from '../../../../constants.js';
 
 /**
@@ -639,6 +640,10 @@ export function get_prop_source(binding, state, name, initial) {
 		flags |= PROPS_IS_RUNES;
 	}
 
+	if (binding.kind === 'bindable_prop') {
+		flags |= PROPS_IS_BINDABLE;
+	}
+
 	if (
 		state.analysis.accessors ||
 		(state.analysis.immutable ? binding.reassigned : binding.mutated)

packages/svelte/src/constants.js

@@ -11,6 +11,7 @@ export const PROPS_IS_IMMUTABLE = 1;
 export const PROPS_IS_RUNES = 1 << 1;
 export const PROPS_IS_UPDATED = 1 << 2;
 export const PROPS_IS_LAZY_INITIAL = 1 << 3;
+export const PROPS_IS_BINDABLE = 1 << 4;
 
 /** List of Element events that will be delegated */
 export const DelegatedEvents = [

packages/svelte/src/internal/client/reactivity/props.js

@@ -1,5 +1,6 @@
 import { DEV } from 'esm-env';
 import {
+	PROPS_IS_BINDABLE,
 	PROPS_IS_IMMUTABLE,
 	PROPS_IS_LAZY_INITIAL,
 	PROPS_IS_RUNES,
@@ -142,6 +143,15 @@ export function prop(props, key, flags, initial) {
 	var prop_value = /** @type {V} */ (props[key]);
 	var setter = get_descriptor(props, key)?.set;
 
+	if ((flags & PROPS_IS_BINDABLE) === 0 && setter) {
+		throw new Error(
+			'ERR_SVELTE_NOT_BINDABLE' +
+				(DEV
+					? `: Cannot bind:${key} because the property was not declared as bindable. To mark a property as bindable, use let \`{ ${key} } = $props.bindable()\` within the component.`
+					: '')
+		);
+	}
+
 	if (prop_value === undefined && initial !== undefined) {
 		if (setter && runes) {
 			// TODO consolidate all these random runtime errors

packages/svelte/tests/runtime-runes/samples/props-not-bindable/Counter.svelte

@@ -0,0 +1,5 @@
+<script>
+	let { count } = $props();
+</script>
+
+{count}

packages/svelte/tests/runtime-runes/samples/props-not-bindable/_config.js

@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	error:
+		'ERR_SVELTE_NOT_BINDABLE: Cannot bind:count because the property was not declared as bindable. To mark a property as bindable, use let `{ count } = $props.bindable()` within the component.',
+	html: `0`
+});

packages/svelte/tests/runtime-runes/samples/props-not-bindable/main.svelte

@@ -0,0 +1,7 @@
+<script>
+    import Counter from './Counter.svelte';
+
+    let count = $state(0);
+</script>
+
+<Counter bind:count />