EmberJS "assertion failed: calling set on destroyed object" after unloading and reloading models

Question

I'm having trouble unloading data models and having them properly re-populate when API calls are made.

The models:

/* Model Foo */
export default DS.Model.extend({
  bars: DS.hasMany('bar', { async: true })
});

/* Model Bar */
export default DS.Model.extend({
  foo: DS.belongsTo('foo', { async: true, inverse: 'bars' })
});

At a point in the app, both foo and bar are unloaded from ember data store and then reloaded from an API call. Like so:

/* Unload and reload snippet */
this.store.unloadAll('bar');
this.store.unloadAll('foo');

let bars = this.store.filter('bar', { 
  queryParam: x 
}, function(bar) {
  return x === bar.x
});

let foos = this.store.filter('foo', { 
  queryParam: y 
}, function(foo) {
  return y === bar.y
});

let self = this;
Ember.RSVP.all([foos, bars]).finally(function() {
  self.controller.set('model.foos', foos);
  self.controller.set('model.bars', bars);
});

The problem arises in a computed property that is dependent on these model changes.

/* Computed property elsewhere in app */
compProp: Ember.computed('foo.bars.[]', function() {
  let tmp = this.get('foo.bars'); /* <-- Error generating line */
  .
  .
  .
})

This line gives me the following error: Assertion Failed: calling set on destroyed object: <DS.PromiseManyArray:ember1995>.content = <DS.ManyArray:ember3320>

Stack trace from error:

Assertion Failed: calling set on destroyed object: <DS.PromiseManyArray:ember1014>.content = <DS.ManyArray:ember1348>
Error
    at assert (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:23072:13)
    at Object.assert (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:23285:34)
    at Object.set (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:39281:17)
    at Class.set (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:52151:26)
    at ManyRelationship._updateLoadingPromise (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:152522:33)
    at ManyRelationship.getRecords (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:152723:21)
    at Class.get (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:152101:60)
    at ComputedPropertyPrototype.get (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:34367:28)
    at get (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:39184:19)
    at _getPath (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:39205:13)
    at Object.get (http://localhost:4200/assets/vendor-3e8430b320dbe268f7ee6486de4c6cad.js:39180:14)

Thanks for any help!

Side notes:

I'm aware store.filter() is deprecated. I'm upgrading the app from an earlier Ember version and using ember-data-filter addon for temporary compatibility.
This was working on Ember 1.13.

Update

In the interest of not leaving this question open ended, I was never able to find the problem.

The solution for me was removing all unloadAll() calls and managing records individually as needed.

AlexMA AlexMA · Accepted Answer · 2017-06-09T21:06:24

This could be caused by any async set that occurs on an element that's been destroyed by ember. As such it can be tricky to track down. I usually turn on "pause on caught exceptions" in the chrome developer console to find the set that caused the issue.

EmberJS "assertion failed: calling set on destroyed object" after unloading and reloading models

Update

1 Answers