Ember.js - “Cannot perform operations on a Metamorph that is not in the DOM” caused by template

Question

I\'ve been having an issue with Ember.js throwing the error:

Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM.

I

Answer 1

The problem is simple, but tracking the actual cause is hard. For items that we track using metamorph, it wraps beteween a script element with an id of metamorph-##-start and id metamorph-##-end. Under normal circumstances, Ember shouldn't remove them unless they're no longer needed. There're a couple of reasons why this could be removed:

• Manually manipulating the DOM. If you manually remove the script tags, then, well they won't be found.
• Malformed HTML. Let's say you left an open div, then the metamorph-##-end tag will get nested at a different level than the start tag.