Cannot read property 'animatableElement' of undefined

Help Requests
1

I’ve seen a few previously closed bugs with the same exception which have been fixed. We’re using newer versions which haven’t seen any reports of this:

aurelia-templating@1.6.0
aurelia-templating-resources@1.5.4

We’re getting a few error reports from Sentry about this occurring in our Electron app on customers machines. We can’t reproduce locally otherwise I’d have opened a Github issue.

The stack shows that in attached() we’re calling sort() on an array which is bound to a repeat.for which is triggering some Aurelia stuff. There’s nothing wrong with this right?

Below is the full stack trace but you can also click here to see the stack trace in Sentry with sources.

TypeError: Cannot read property 'animatableElement' of undefined
  at getAnimatableElement(jspm_packages/npm/aurelia-templating@1.6.0/aurelia-templating.js:1601:9)
  at animateView(jspm_packages/npm/aurelia-templating@1.6.0/aurelia-templating.js:1640:31)
  at removeAt(jspm_packages/npm/aurelia-templating@1.6.0/aurelia-templating.js:1842:28)
  at removeView(jspm_packages/npm/aurelia-templating-resources@1.5.4/repeat.js:284:26)
  at _runSplices(jspm_packages/npm/aurelia-templating-resources@1.5.4/array-repeat-strategy.js:195:36)
  at instanceMutated(jspm_packages/npm/aurelia-templating-resources@1.5.4/array-repeat-strategy.js:164:29)
  at context(jspm_packages/npm/aurelia-templating-resources@1.5.4/repeat.js:172:19)
  at call(jspm_packages/npm/aurelia-templating-resources@1.5.4/repeat.js:116:12)
  at callSubscribers(jspm_packages/npm/aurelia-binding@1.6.0/aurelia-binding.js:384:17)
  at call(jspm_packages/npm/aurelia-binding@1.6.0/aurelia-binding.js:998:12)
  at flushChangeRecords(jspm_packages/npm/aurelia-binding@1.6.0/aurelia-binding.js:957:12)
  at sort(jspm_packages/npm/aurelia-binding@1.6.0/aurelia-binding.js:1108:29)
  at sort(src/files/sort/file-sort.ts:46:18)
  at sortFiles(src/files/sort/file-sort.ts:42:17)
  at updateFiles(src/files/list.ts:89:32)
  at attached(src/files/list.ts:34:10)
  at attached(jspm_packages/npm/aurelia-templating@1.6.0/aurelia-templating.js:3513:22)
  at attached(jspm_packages/npm/aurelia-templating@1.6.0/aurelia-templating.js:1563:22)
  at add(jspm_packages/npm/aurelia-templating@1.6.0/aurelia-templating.js:1726:12)
  at _show(jspm_packages/npm/aurelia-templating-resources@1.5.4/if-core.js:67:26)
  at _update(jspm_packages/npm/aurelia-templating-resources@1.5.4/if.js:120:29)
  at changeHandlerName(jspm_packages/npm/aurelia-templating-resources@1.5.4/if.js:106:10)
  at selfSubscriber(jspm_packages/npm/aurelia-templating@1.6.0/aurelia-templating.js:3720:30)
  at call(jspm_packages/npm/aurelia-templating@1.6.0/aurelia-templating.js:3584:12)
  at setValue(jspm_packages/npm/aurelia-templating@1.6.0/aurelia-templating.js:3564:16)
  at propertyName(jspm_packages/npm/aurelia-templating@1.6.0/aurelia-templating.js:3675:31)
  at setValue(jspm_packages/npm/aurelia-binding@1.6.0/aurelia-binding.js:3681:11)
  at updateTarget(jspm_packages/npm/aurelia-binding@1.6.0/aurelia-binding.js:4939:25)
  at call(jspm_packages/npm/aurelia-binding@1.6.0/aurelia-binding.js:4954:14)
  at callSubscribers(jspm_packages/npm/aurelia-binding@1.6.0/aurelia-binding.js:391:17)
  at call(jspm_packages/npm/aurelia-binding@1.6.0/aurelia-binding.js:3754:10)
  at _flushQueue(jspm_packages/npm/aurelia-task-queue@1.2.1/aurelia-task-queue.js:103:14)
  at flushMicroTaskQueue(jspm_packages/npm/aurelia-task-queue@1.2.1/aurelia-task-queue.js:154:10)
  at MutationObserver.<anonymous>(jspm_packages/npm/aurelia-task-queue@1.2.1/aurelia-task-queue.js:79:22)
2

It looks like there is something being removed over and over again.

  • Is your repeat nested directly under an if ?
  • Maybe should try immutable sort (slice().sort())
3

Is your repeat nested directly under an if ?

Nope. The HTML looks a bit like this, so there is a repeat within a repeat:

    <div class="files flex-row flex-wrap flex-grow scroll-y" ref="listContainer">
      <div repeat.for="file of files" class="file-icon ${file.selected ? 'selected' : ''}" contextmenu.delegate="rightClick(file, $event)" click.delegate="clickFile(file, $event)" dblclick.delegate="dblClickFile(file)" draggable="true" dragstart.delegate="dragStart($event, file)" css.bind="iconCss">
        <div class="flex-column flex-centre file-contain">
          <div class="thumb" css="background-image: url(${file.thumbURL})">
            <icon if.bind="file.isConfig" name="wrench" size="75" color="#495057"></icon>
            <span repeat.for="each of file.labels" class="badge badge-primary badge-label" click.delegate="filterByLabel(each)">${each}</span>
          </div>
          <span class="name" title.bind="file.name">${file.name}</span>
        </div>
      </div>
    </div>

Maybe should try immutable sort (slice().sort())

What would be the side effects of this? On updating it would have to re-render all the items?