TypeError: each_blocks [i] в ​​Svelte имеет значение null

У меня проблема с созданием и обновлением списков компонентов в Svelte. У меня есть список TodoItems, а именно:

App.html

<!-- ... -->
<!-- The culprit -->
{#if todos.length}
  {#each todos as todo, i}
    <TodoItem
     on:remove='remove(i)'
     title = {todo.title}
   />
  {/each}
{/if}
<script>
import TodoItem from './TodoItem.html';

export default {
 components: {
   TodoItem,
 },
 data() {
   return {
     todos: [{ title: 'Hello World' }],
   };
 },
 methods: {
   remove(key) {
     let { todos } = this.get();
     this.set({
       todos: todos.filter((_, i) => i !== key),
     });
   },
 },
};
</script>

TodoItem.html

<li>
  <div class = "view">
    <label>{title}</label>
    <button on:click='fire("remove")' class = "destroy"></button>
  </div>
</li>

При обновлении списка возникает ошибка Cannot read property 'i' of null (chrome) или TypeError: each_blocks[i] is null (firefox).

Вот Пример REPL.

🤔 А знаете ли вы, что...
Svelte использует концепцию компиляции в отличие от других фреймворков, таких как React и Vue.


218