x-for effect called after cleanup

[PierreTurnbull]

Hi,

I encountered the following error on https://github.com/alpinejs/alpine/blob/v3.14.1/packages/alpinejs/src/directives/x-for.js#L94:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

It seems like the effect function is called after the cleanup function, which I suppose must not happen.

After hours or digging I am still unsure of the exact cause. I am not even sure it is an actual bug, or just a misuse from my part. It seems to have something to do with multiple factors: template nesting, getters, watchers, recreation of arrays.

Here is a minimal reproduction example. Note that reasons why I made certain choices, such as destructuring groups in the orphanItems getter, might not be clear. That is because I simplified the code a lot to make it easier to debug.

<div x-data="{
  groups: [{id: 1, name: 'a1', itemIds: [12]}, {id: 2, name: 'a2', itemIds: [13]}],
  items: [{id:11,name:'b1'},{id:12,name:'b2'},{id:13,name:'b3'}],
  get orphanItems() {
    // the following line is important. if you delete it, the watcher
    // below is not called when the value of groups changes.
    ;[...this.groups];

    return [...this.items]
  },
  get groupsWithItems() {
    // creating new objects for each group is important to make the bug happen, idk why
    return this.groups.map(a => ({...a}))
  }
}">
  <button x-on:click="groups.splice(0,1)">Delete group</button>
  <template x-for="group in groupsWithItems" :key="group.id">
    <div>
      <p x-text="'a: ' + group.name"></p>
      <div x-data="{
        _search: '',
        _availableItems: orphanItems || [],
      }"
      x-init="
        $watch('orphanItems', (v) => {
          console.log('watch', v)
          _availableItems = v
        })
      ">
        <template x-for="item in _availableItems" :key="item.id">
          <p x-text="'  a2: ' + item.name"></p>
        </template>
      </div>
    </div>
  </template>
</div>

If it is a bug, unfortunately I am not able to dig further. I have already lost many hair on this and I feel like I am reaching my limits.

If it's a misuse from my part, I would love to understand what I am doing wrong that causes this problem, and also suggest to handle this error with a meaningful message to explain the misuse.

I found a similar discussion, although I am unsure it is related : #1837

[ekwoka]

Solved in #4300 which should be included in the next release.