(v0.3.0) Assertion Failed: Cannot call get with 'element' on an undefined object.

[sarus]

I started getting this error after updating to Ember v0.2.7 (it's possible the error is unrelated to the upgrade).

Here is the stack trace:

app.js:15 Uncaught Error: Assertion Failed: Cannot call get with 'element' on an undefined object.EmberError @ ember.debug.js:19695
assert @ ember.debug.js:6715
assert @ ember.debug.js:19497
get @ ember.debug.js:23972
getElementForTarget @ target.js:16
attach @ target.js:92
poll @ target.js:62
fn @ ember.debug.js:491
invokeWithOnError @ ember.debug.js:999
flush @ ember.debug.js:1054
flush @ ember.debug.js:862
end @ ember.debug.js:176
run @ ember.debug.js:289
_runExpiredTimers @ ember.debug.js:685
Backburner._boundRunExpiredTimers @ ember.debug.js:145
ember.debug.js:51717 Attempting transition to channels

The error occurs in target.js in this function

  function getElementForTarget(target) {
    if (typeof target === 'string') {
      return document.getElementById(target);
    } else if ((0, _emberMetalGet['default'])(target, 'element')) {
      return (0, _emberMetalGet['default'])(target, 'element');
    } else {
      return target;
    }
  }

Somehow target is null which causes the issue. The error only occurs when transitioning between routes. So for example, if I load Route A, then click on a link to go to Route B, the error will occur. If I just load Route B directly (e.g., with a page refresh) there is no error.

I'm wondering if a null check on target is a valid fix for this?

[tim-evans]

Ahh, I think I know what's going on here. The target isn't being detected, possibly due to it not being in the DOM. I'll see what I can do.

If you can come up with a reproduction, that would help a lot :)

[sarus]

Playing around with it more I'm actually getting the same error when clicking on other drop down buttons in subroutes even when there is no route transition. These are definitely new to Ember 2.7 so not sure if some behavior might have changed there. The position of the drop down in the sub routes is also off (pop-over appears in the wrong location).

Will keep trying to narrow it down a bit.

All the errors do seem to be related to a missing element:

Uncaught Error: Cannot get styles on an element that doesn't existget
Styles @ dom-ruler.amd.js:174
detectBoxSizing @ dom-ruler.amd.js:230
getLayout @ dom-ruler.amd.js:76
Rectangle.ofElement @ rectangle.js:71
tile @ component.js:267
invokeWithOnError @ ember.debug.js:999
flush @ ember.debug.js:1054
flush @ ember.debug.js:862
end @ ember.debug.js:176
run @ ember.debug.js:289
join @ ember.debug.js:318
run.join @ ember.debug.js:24337
(anonymous function) @ ember.debug.js:24400
dispatch @ jquery.js:4737
elemData.handle @ jquery.js:4549

[tim-evans]

Thanks for this!

[sarus]

Hi Tim,

Trying to get a stripped down example of this occurring. The subroute issue appears to be a false alarm. That was related to another problem that Ember 2.7 uncovered that I was able to resolve. Still looking into the route transition issue. Will report back here.

[sarus]

Oh geeze,

I found the problem. I had an element id duplicated in one of my templates. The button that the drop down was supposed to trigger off of was not loaded into that route thus causing the element not found issues.

Sorry for the mass confusion on my part!

[tim-evans]

Haha, no problem! That's definitely confusing. Would you be keen on pushing up a PR that asserts that there's no duplicates?

[sarus]

That's a good idea. I'll add an assert for duplicates as well as an assert for the element not existing on the page.

[tim-evans]

Yay!