Assertion Failed: You modified"abc" twice

1

Error: Assertion Failed: You modified “appSyncInvalid” twice on <gui@component:protection/properties-schedules/general-properties/app-sync::ember3004> in a single render. It was rendered in “component:column” and modified in “component:protection/protection-schedule”. This was unreliable and slow in Ember 1.x and is no longer supported.

I upgraded my ember version from 1.x to 2.x and Now i am getting this error. Please help me out

2

Hi @sshah3012, that error is probably the most challenging issue that people hit when going from 1.x to 2.x. People often refer to it as the “backtracking rerender” problem. Some more background information is here.

Based on the error message you pasted, you should look for a property named appSyncInvalid in your components. Something in the protection/protection-schedule component is causing appSyncInvalid to change. Most likely a call to this.set or Ember.set. If you can figure out what’s making it change, you can stop doing that and that will fix the error. Instead of changing the value from that point, see if you can figure out how to change it “higher” in the component hierarchy, possibly in the component named column, if I’m reading the error message correctly.

Alternatively, there is a hackier solution. It can reduce your performance somewhat, but it also makes the error go away and causes your correct content to be rendered. When you find the offending set, instead of figuring out how to move it earlier enough to avoid the error, you can move it later so that it happens long after rendering has finished by wrapping it in next:

import { next } from '@ember/runloop';
...
next(() => {
  if (!this.isDestroyed) {
    // your offending `set` goes here
    this.set(...)
  }
})

I mention this messier solution not because it’s great code, but because it may help you move past this bug and buy you more time to do a proper refactor more gradually.

3 Likes