templating: aurelia-templating.js:1544 Uncaught TypeError: Cannot read property 'animatableElement' of undefined

I’m submitting a bug report

  • Library Version: 1.6.0

Please tell us about your environment:

  • Operating System: Win 10

  • Node Version: 6.11.4

  • NPM Version: 3.10.10

  • JSPM OR Webpack AND Version webpack 3.6.0

  • Browser: Chrome

  • Language: TS 2.5.3

Current behavior: When removing an item from an array using splice, Aurelia throws an exception.

aurelia-templating.js:1544 Uncaught TypeError: Cannot read property 'animatableElement' of undefined
    at getAnimatableElement (aurelia-templating.js:1544)
    at ViewSlot.animateView (aurelia-templating.js:1583)
    at ViewSlot.removeAt (aurelia-templating.js:1785)
    at Repeat.removeView (repeat.js:263)
    at ArrayRepeatStrategy._runSplices (array-repeat-strategy.js:189)
    at ArrayRepeatStrategy.instanceMutated (array-repeat-strategy.js:158)
    at Repeat.handleCollectionMutated (repeat.js:151)
    at Repeat.call (repeat.js:95)
    at ModifyArrayObserver.callSubscribers (aurelia-binding.js:304)
    at ModifyArrayObserver.call (aurelia-binding.js:917)

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 2
  • Comments: 38 (11 by maintainers)

Most upvoted comments

y = [1, 2]; Template: <div repeat.for="i of y">${i}</div> Steps to repro:

  1. Problem with array.shift():

call y.shift() you will get the error described in this thread.

  1. Problem with array.unshift():

call y.unshift(3) y shows proper value in the console: [3, 1, 2] but in the view - a bizarre value is rendered: 31212

Saw another instance of this error which was caused by core-js being loaded after aurelia-binding (instead of before) and replacing the array.push method. core-js includes a fix for an old browser bug, the check for which is apparently tripped up by the aurelia-binding override.

Thanks for the info @Truffula šŸ‘