Svelte 5: Flaky State Ownership Warning - ownership_invalid_binding

cdcarson commented 1 week ago

Describe the bug

An irrelevant (as far as the state in question goes) modal wrapper results in an ownership_invalid_binding warning:

[svelte] ownership_invalid_binding.../src/lib/PretendModal.svelte passed a value to .../src/lib/LuckyNumbersControl.svelte with bind:, but the value is owned by .../src/routes/EditForm.svelte. Consider creating a binding between .../src/routes/EditForm.svelte and .../src/lib/PretendModal.svelte

~~Notably, this seems to occur only when binding arrays (and possibly other special things,) but not pojos.~~ see comment I tried, but failed, to figure out the difference in my repro.

Reproduction

Repro here. I made it as simple as possible.

Logs

client.js:2639 [svelte] ownership_invalid_binding.../src/lib/PretendModal.svelte passed a value to .../src/lib/LuckyNumbersControl.svelte with `bind:`, but the value is owned by .../src/routes/EditForm.svelte. Consider creating a binding between .../src/routes/EditForm.svelte and .../src/lib/PretendModal.svelte
warn @ client.js:2639
ownership_invalid_binding @ warnings.js:55
add_owner @ ownership.js:118
(anonymous) @ ownership.js:135
execute_reaction_fn @ runtime.js:267
execute_effect @ runtime.js:431
create_effect @ effects.js:98
render_effect @ effects.js:222
user_pre_effect @ effects.js:148
add_owner_effect @ ownership.js:132
(anonymous) @ EditForm.svelte:19
(anonymous) @ if.js:55
execute_reaction_fn @ runtime.js:267
execute_effect @ runtime.js:431
create_effect @ effects.js:98
branch @ effects.js:235
(anonymous) @ if.js:55
execute_reaction_fn @ runtime.js:267
execute_effect @ runtime.js:431
create_effect @ effects.js:98
block @ effects.js:230
if_block @ if.js:33
(anonymous) @ EditForm.svelte:19
(anonymous) @ snippet.js:53
(anonymous) @ snippet.js:33
execute_reaction_fn @ runtime.js:267
execute_effect @ runtime.js:431
create_effect @ effects.js:98
branch @ effects.js:235
(anonymous) @ snippet.js:33
execute_reaction_fn @ runtime.js:267
execute_effect @ runtime.js:431
create_effect @ effects.js:98
block @ effects.js:230
snippet @ snippet.js:24
PretendModal @ PretendModal.svelte?t=1714921590017:18
(anonymous) @ hmr.js:34
execute_reaction_fn @ runtime.js:267
execute_effect @ runtime.js:431
create_effect @ effects.js:98
branch @ effects.js:235
(anonymous) @ hmr.js:29
execute_reaction_fn @ runtime.js:267
execute_effect @ runtime.js:431
create_effect @ effects.js:98
block @ effects.js:230
(anonymous) @ hmr.js:20
EditForm @ EditForm.svelte:19
(anonymous) @ hmr.js:34
execute_reaction_fn @ runtime.js:267
execute_effect @ runtime.js:431
create_effect @ effects.js:98
branch @ effects.js:235
(anonymous) @ hmr.js:29
execute_reaction_fn @ runtime.js:267
execute_effect @ runtime.js:431
create_effect @ effects.js:98
block @ effects.js:230
(anonymous) @ hmr.js:20
(anonymous) @ +page.svelte:56
(anonymous) @ if.js:55
execute_reaction_fn @ runtime.js:267
execute_effect @ runtime.js:431
create_effect @ effects.js:98
branch @ effects.js:235
(anonymous) @ if.js:55
execute_reaction_fn @ runtime.js:267
execute_effect @ runtime.js:431
process_effects @ runtime.js:555
flush_nested_effects @ runtime.js:632
flush_queued_root_effects @ runtime.js:454
process_microtask @ runtime.js:483

System Info

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1
    Memory: 121.72 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.0 - ~/.nvm/versions/node/v20.12.0/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.0/bin/npm
    pnpm: 9.0.6 - ~/Library/pnpm/pnpm
    bun: 1.0.29 - ~/.bun/bin/bun
  Browsers:
    Chrome: 124.0.6367.119
    Edge: 124.0.2478.80
    Safari: 17.4.1
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.123

Severity

annoyance

cdcarson commented 1 week ago

~~Notably, this seems to occur only when binding arrays (and possibly other special things,) but not pojos.~~ I tried, but failed, to figure out the difference in my repro.

I think I figured this out. It's not an issue with the type of bound value, but with the fact that my LuckyNumbersControl.svelte updates the bound value with a function....

https://github.com/cdcarson/svelte-flaky-state-ownership-warning/blob/bf866c5708de9f8ebaa6f7edaceffd61332e9448/src/lib/LuckyNumbersControl.svelte#L1-L12

...which the compiler (?) doesn't pick up. So the component isn't added to the "owners" of the state. Contrast this with my NameControl.svelte...

https://github.com/cdcarson/svelte-flaky-state-ownership-warning/blob/bf866c5708de9f8ebaa6f7edaceffd61332e9448/src/lib/NameControl.svelte#L1-L27

...where the html inputs are bound to formData, thus making the ownership "visible".

cdcarson commented 1 week ago

This appears to be fixed by #11490, so I'll close it.

sveltejs / svelte