Assertion failing in the staging environment build but not in development (modified twice in a single render issue)

[tsteuwer]

Prerequisites:

ember: 2.13.3
ember-cli: 2.12.1
http_parser: 2.7.0
node: 6.0.0
v8: 5.0.71.35
uv: 1.9.0
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 48
openssl: 1.0.2g
os: linux x64
3.8.6
The program 'yarn' is currently not installed.

We are using ember deploy staging if that matters.

So, we have a model (Hotel) and it has a relationship to many images and many hotel-options. We are receiving an assertion error that breaks the staging environment but doesn't affect us while we are developing on localhost via ember s.

ember.debug.js:19818 Assertion Failed: You modified "hotel.image.url" twice on <DS.PromiseObject:ember1179> in a single render. It was rendered in "component:hotel-result" and modified in "component:hotel-result". This was unreliable and slow in Ember 1.x and is no longer supported. See https://github.com/emberjs/ember.js/issues/13948 for more details.
Error
    at assert (https://my-site.com/static//javascript/ember-dateless-results/assets/vendor.js:23756:13)
    at Object.assert (https://my-site.com/static//javascript/ember-dateless-results/assets/vendor.js:23969:34)
    at https://my-site.com/static//javascript/ember-dateless-results/assets/vendor.js:40993:27
    at runInDebug (https://my-site.com/static//javascript/ember-dateless-results/assets/vendor.js:23869:5)
    at Object.runInDebug (https://my-site.com/static//javascript/ember-dateless-results/assets/vendor.js:23993:38)
    at Object.assertNotRendered (https://my-site.com/static//javascript/ember-dateless-results/assets/vendor.js:40967:23)
    at Object.propertyDidChange (https://my-site.com/static//javascript/ember-dateless-results/assets/vendor.js:39610:30)
    at Class.contentPropertyDidChange (https://my-site.com/static//javascript/ember-dateless-results/assets/vendor.js:49680:17)
    at Object.sendEvent (https://my-site.com/static//javascript/ember-dateless-results/assets/vendor.js:35801:18)
    at ObserverSet.flush (https://my-site.com/static//javascript/ember-dateless-results/assets/vendor.js:39170:27)

The property hotel.image is a computed property which returns a DS.PromiseObject to fetch the main image of a hotel. I've added logging to when this method gets called to find out when it has to re-compute the main image but its never called more than once. The the computed method for the image property looks similar to below:

const {
   PromiseObject,
} = DS;
const {
   RSVP: {
     Promise,
   }
} = Ember;

// ....

image: Ember.computed('images.[]', function() {
  const id = this.hasMany('images').ids()[0],
    store = get(this,'store');

  if (id) {
    // if it's already been loaded resolve the promise
    if (store.hasRecordForId('image', id)) {
      return PromiseObject.create({
        promise: Promise.resolve(store.peekRecord('image', id), 'hotel:img-in-cache'),
      });
    }
    // else fetch it
    return PromiseObject.create({
      promise: store.findRecord('image', id).catch(() => NO_IMAGES),
    });
  }
  // return the no image object.
  return PromiseObject.create({
    promise: Promise.resolve(NO_IMAGES, 'hotel:no-img-found'),
  });
}

The same thing happens when we call hotel.hotelOptions.someProperty which is not doing anything like the computed property above, its simply a relationship. I'm assuming this part is breaking because the image issue happens first.

[tsteuwer]

Update: This even happens if the relationships where side-loaded with the include param in JSON api. It says its calling render twice when looking at hotel.#model.isLoaded property?

[tsteuwer]

Sorry to keep adding to this ticket, but I was able to fix the issue by adding a check in the init method of the component by checking the isLoaded property on the relationship and it somehow fixes it. Obviously this is not desirable but I just wanted to keep this ticket update.

This is the code I added to the component which fixes the issue:

init() {
   this._super(...arguments);
   console.log(this.get('hotel.myRelationship.isLoaded'));
},

I don't even know where to begin to debug this :|

[tsteuwer]

This is starting to concern me now. We have another completely separate app that when we removed the node_modules folder and did a fresh npm install, other places are starting to do this. Did something change in the way this gets handled which it didn't do previously? It's happening on relationships when they get loaded when called through the template syntax of {{somemodel.relationship.property}}.

[tsteuwer]

I have found this to be due to an update in ember-data in 2.14.X:

emberjs/data#5023
emberjs/data#4942

Changing ember-data version to 2.13.1 fixed this issue.

[locks]

Thank you for the thorough reporting and the links to the issues.
Let's track the problem in the Ember Data issues :)

[cwarny]

I'm facing the same issue. I'm side-loading a relationship in the included field and my app throws a 'modified twice during single render'