[Glimmer2] DOMException with {{#if}} helper

[simonihmig]

When testing for compatibility of ember-bootstrap with Glimmer2, I get the following exception with the modal component that uses ember-wormhole:

DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

I narrowed it down to ember-wormhole using a conditional statement, as shown in the following minimalistic example. As soon as show is set to true, I get the mentioned exception:

{{#ember-wormhole to="worm"}}
    <p>This is wormholed content.</p>

  {{#if show}}
    <p>This is conditional content.</p>
  {{/if}}
{{/ember-wormhole}}

Here is a demo repo to replicate this bug: https://github.com/simonihmig/ember-wormhole-glimmer2-demo

I am not sure who is to blame here, if it is ember-wormhole or Glimmer2, so first filing this here for the time being...

[krisselden]

Glimmer 2 caches the parent element, we need an API to tell glimmer it is reparented, for now you need to wrap dynamic content in a static element

[krisselden]

So put a div around that if

[simonihmig]

Thanks @krisselden for the quick feedback. Indeed, your suggestion fixes the problem!

If I understand you correctly this workaround will be obsolete once some changes to Glimmer have landed, is that right? Is that already tracked somewhere?

[rwjblue]

@simonihmig - Yes, it will likely be fixed by some API collaboration between ember-wormhole and Ember/Glimmer. To help facilitate that, it would be good to get a failing test PR submitted (notice that the canary build is currently passing).

[simonihmig]

@rwjblue There you go...

[rwjblue]

FYI - We just submitted glimmerjs/glimmer-vm#331 to specifically support ember-wormhole for Ember 2.9...

[urbany]

This is happening in the current ember release build 2.10.0 (and the tests are failing with ember-wormhole@master), anyway I can help?

[rwjblue]

@urbany - With latest ember-wormhole and ember@2.10, you need to have a stable root element inside the wormhole block. This is something that we will continue to iterate and work on, but for now the work around is fairly straightforward.

Change:

{{#ember-wormhole to="worm"}}
  {{#if foo}}

  {{/if}}
  <p>Other content, whatever</p>
{{/ember-wormhole}}

To:

{{#ember-wormhole to="worm"}}
  <div>
    {{#if foo}}

    {{/if}}
    <p>Other content, whatever</p>
  </div>
{{/ember-wormhole}}

[urbany]

Thanks @rwjblue this solution also works for ember-tether