Cannot read property 'splice' of undefined

Describe the bug

I extracted a very simplified version from our code base: https://svelte.dev/repl/2a0e77c4b3e74471a51c110ecf2fcdca?version=3.35.0

I’m not sure what more to describe. Svelte crashes. Some weird edge case with nested {#each} and input[radio] I guess.

Logs

Chrome:

VM154:657 Uncaught (in promise) TypeError: Cannot read property 'splice' of undefined
    at Object.destroy [as d] (eval at handle_message (VM153 about:srcdoc:13), <anonymous>:657:80)
    at destroy_each (eval at handle_message (VM153 about:srcdoc:13), <anonymous>:48:31)
    at Object.destroy [as d] (eval at handle_message (VM153 about:srcdoc:13), <anonymous>:583:8)
    at Object.destroy [as d] (eval at handle_message (VM153 about:srcdoc:13), <anonymous>:709:17)
    at destroy_each (eval at handle_message (VM153 about:srcdoc:13), <anonymous>:48:31)
    at Object.destroy [as d] (eval at handle_message (VM153 about:srcdoc:13), <anonymous>:818:8)
    at destroy_block (eval at handle_message (VM153 about:srcdoc:13), <anonymous>:159:15)
    at update_keyed_each (eval at handle_message (VM153 about:srcdoc:13), <anonymous>:231:17)
    at Object.update [as p] (eval at handle_message (VM153 about:srcdoc:13), <anonymous>:873:23)
    at update (eval at handle_message (VM153 about:srcdoc:13), <anonymous>:146:40)

Firefox:

Uncaught (in promise) TypeError: ctx[4][0][ctx[11]][ctx[8]] is undefined
    destroy about:srcdoc line 83 > eval:657
    destroy_each about:srcdoc line 83 > eval:48
    destroy about:srcdoc line 83 > eval:583
    destroy about:srcdoc line 83 > eval:709
    destroy_each about:srcdoc line 83 > eval:48
    destroy about:srcdoc line 83 > eval:818
    destroy_block about:srcdoc line 83 > eval:159
    update_keyed_each about:srcdoc line 83 > eval:231
    update about:srcdoc line 83 > eval:873
    update about:srcdoc line 83 > eval:146
    flush about:srcdoc line 83 > eval:114
    promise callback*schedule_update about:srcdoc line 83 > eval:96
    make_dirty about:srcdoc line 83 > eval:281
    ctx about:srcdoc line 83 > eval:317
    removeOperation about:srcdoc line 83 > eval:937
    click_handler about:srcdoc line 83 > eval:947
    click_handler about:srcdoc line 83 > eval:738

To Reproduce

https://svelte.dev/repl/2a0e77c4b3e74471a51c110ecf2fcdca?version=3.35.0

Hit both “remove” buttons from top to bottom. The first element (without the radios) is important or else it doesn’t reproduce (with just a single item). See:

https://user-images.githubusercontent.com/679144/111912796-8f956b00-8a6b-11eb-9133-7784adc2d6c1.mp4

Expected behavior

No error

Information about your Svelte project:

Mostly irrelevant, since it reproduces in repl. In Chrome and Firefox for me.

  System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i7-6770HQ CPU @ 2.60GHz
    Memory: 5.69 GB / 15.53 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    npm: 7.6.3 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Firefox: 86.0
  npmPackages:
    svelte: ^3.35.0 => 3.35.0

Severity

Since it completely crashes the script / production app this is serious I guess?

[mdynnl]

This should just work and be fixed. But there are ways to workaround that.

1. Use non-keyed each in top-level
2. Introduce a component boundary to wrap <input bind:group />

While 1 is not an option if there are a lot of elements, 2 is pretty straightforward and easy which I think most do this already, judging this issue didn’t get crowded.

[kamholz]

Just ran into this. Would be good to get it fixed!