binding_property_non_reactive error without location

[thebjorn]

Describe the bug

I'm getting the following error with the 192 release

[svelte] binding_property_non_reactive
`bind:this={components[1]}` is binding to a non-reactive property

The error doesn't contain any hint as to where it happened.

Please, could all error messages come with a filename and line number?

Reproduction

Update: you can reproduce this with create svelte (I selected only skeleton project, js only, and svelte 5 preview):

npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open

the devtools console has two of these errors.

---

The only location a global search of my project found with the exact text was in .svelte-kit/generated/root.svelte

{#if constructors[1]}
	<svelte:component this={constructors[0]} bind:this={components[0]} data={data_0}>
		<svelte:component this={constructors[1]} bind:this={components[1]} data={data_1} {form} />
	</svelte:component>
{:else}
	<svelte:component this={constructors[0]} bind:this={components[0]} data={data_0} {form} />
{/if}

{#if mounted}
	<div id="svelte-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; left: 0; top: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px">
		{#if navigated}
			{title}
		{/if}
	</div>
{/if}

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (48) x64 AMD Ryzen Threadripper 3960X 24-Core Processor
    Memory: 32.72 GB / 63.88 GB
  Binaries:
    Node: 21.5.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.5.0 - ~\AppData\Local\pnpm\pnpm.CMD
    bun: 1.1.8 - ~\AppData\Roaming\npm\bun.CMD
  Browsers:
    Edge: Chromium (126.0.2592.87)
    Internet Explorer: 11.0.22621.3527

Severity

annoyance

[paoloricciuti]

This is actually an issue with sveltekit and how the app is generated

Here's a minimal repro in the repl ...the fix is simple but it needs to be in the sveltekit repo. Will PR soon

[t1m0t]

This is actually an issue with sveltekit and how the app is generated

@paoloricciuti It looks like binding_property_non_reactive was introduced here in svelte@5.0.0-next.192. Are you sure it is related to sveltekit?

[paoloricciuti]

This is actually an issue with sveltekit and how the app is generated

@paoloricciuti It looks like binding_property_non_reactive was introduced here in svelte@5.0.0-next.192. Are you sure it is related to sveltekit?

Is kinda of a mix...the warn was introduction in svelte but it's a legit warn. However the generated component from svelte is using a prop with default value as a reactive value and since that PR that's not the case anymore. So the right fix is in sveltekit and not here.

[memestageceo]

Same issue here, and I'm on svelte 5 next 195.

And practical implications of this, or is it just an erroneous warning.

[paoloricciuti]

Same issue here, and I'm on svelte 5 next 195.

And practical implications of this, or is it just an erroneous warning.

The PR to sveltekit is still open. When it's merged this should be fixed once you update sveltekit and run sync

[phcoliveira]

Hello everyone.
But is the evaluation of the property wrong? Meaning that the property may indeed be reactive, but, while evaluating it, was wrongly deemed non reactive?

I am starting with Svelte 5 and I think I am using reactivity correctly. But I am not sure yet.

Here is a class I created for handling an actor subscription from XState.

// actor-subscription.svelte.ts
import { onDestroy } from 'svelte';
import type { AnyActorLogic, SnapshotFrom } from 'xstate';
import { createActor } from 'xstate';

export class ActorSubscription<TActorLogic extends AnyActorLogic> {
	readonly actorRef: ReturnType<typeof createActor<TActorLogic>>;
	readonly send: ReturnType<typeof createActor<TActorLogic>>['send'];

	#snapshot: SnapshotFrom<ReturnType<typeof createActor<TActorLogic>>> = $state()!;

	get snapshot() {
		return this.#snapshot;
	}

	constructor(actorLogic: TActorLogic) {
		this.actorRef = createActor(actorLogic);
		this.send = this.actorRef.send;
		this.#snapshot = this.actorRef.getSnapshot();

		const subscription = this.actorRef.subscribe((snapshot) => {
			this.#snapshot = snapshot;
		});

		onDestroy(subscription.unsubscribe);

		this.actorRef.start();
	}
}

So, when I use the getter snapshot, I expect it to be reactive. I used derived.by(() => this.#snapshot), but I got the same error. Finally, I also only used a public snapshot property, which is something I don't want, but the error persists.

Any help is much appreciated. Thanks!

[paoloricciuti]

Hello everyone. But is the evaluation of the property wrong? Meaning that the property may indeed be reactive, but, while evaluating it, was wrongly deemed non reactive?

I am starting with Svelte 5 and I think I am using reactivity correctly. But I am not sure yet.

Here is a class I created for handling an actor subscription from XState.

// actor-subscription.svelte.ts
import { onDestroy } from 'svelte';
import type { AnyActorLogic, SnapshotFrom } from 'xstate';
import { createActor } from 'xstate';

export class ActorSubscription<TActorLogic extends AnyActorLogic> {
	readonly actorRef: ReturnType<typeof createActor<TActorLogic>>;
	readonly send: ReturnType<typeof createActor<TActorLogic>>['send'];

	#snapshot: SnapshotFrom<ReturnType<typeof createActor<TActorLogic>>> = $state()!;

	get snapshot() {
		return this.#snapshot;
	}

	constructor(actorLogic: TActorLogic) {
		this.actorRef = createActor(actorLogic);
		this.send = this.actorRef.send;
		this.#snapshot = this.actorRef.getSnapshot();

		const subscription = this.actorRef.subscribe((snapshot) => {
			this.#snapshot = snapshot;
		});

		onDestroy(subscription.unsubscribe);

		this.actorRef.start();
	}
}

So, when I use the getter snapshot, I expect it to be reactive. I used derived.by(() => this.#snapshot), but I got the same error. Finally, I also only used a public snapshot property, which is something I don't want, but the error persists.

Any help is much appreciated. Thanks!

Sorry but how is this related to this issue? Which error persist?

[phcoliveira]

Thank you, @paoloricciuti. What I meant to know is if this message is based on a wrongful evaluation of the property in question.

From what I understood of the problem, the evaluation of a bound property may be wrong, meaning that a truly reactive property was wrongly deemed as non reactive. Hence the message.

Or is this message unnecessary at all, meaning that even binding a non-reactive property should not cause this message?

[paoloricciuti]

Thank you, @paoloricciuti. What I meant to know is if this message is based on a wrongful evaluation of the property in question.

From what I understood of the problem, the evaluation of a bound property may be wrong, meaning that a truly reactive property was wrongly deemed as non reactive. Hence the message.

Or is this message unnecessary at all, meaning that even binding a non-reactive property should not cause this message?

If you are referring to binding_property_non_reactive it happens when you are trying to use bind:value={something} and something is a non reactive value.

However the code you posted doesn't even feature a template. So where are you getting this error? Can you copy and paste the exact error (which should be a warning anyway)

[phcoliveira]

I think I understood the problem more clearly now, so it makes sense that you didn’t understand me first.
So this message is being triggered by a root component generated by SvelteKit and my code, regardless of what is doing, is not causing this message. Is that right?
BYW, I am using the static adapter, if that is relevant.

[paoloricciuti]

I think I understood the problem more clearly now, so it makes sense that you didn’t understand me first. So this message is being triggered by a root component generated by SvelteKit and my code, regardless of what is doing, is not causing this message. Is that right? BYW, I am using the static adapter, if that is relevant.

Yes exactly: this specific warning is caused by sveltekit generated code: there's already a PR open to fix the issue, once that is merged you can just update sveltekit, sync again and be done with it. You are probably still safe to ignore this warning for the moment.