ember-wormhole: [Glimmer2] DOMException with {{#if}} helper

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…

About this issue

Original URL
State: open
Created 8 years ago
Comments: 17 (10 by maintainers)

Commits related to this issue

Run tests on ember beta, release, canary * Fix failing tests when using ember with glimmer2. * Access DOM helper using a method that is safe for both pre-glimmer2 and glimmer2. * Wrap the rendered... — committed to bustle/ember-mobiledoc-dom-renderer by bantic 8 years ago
Glimmer 2 support Supports Ember 2.10, see https://github.com/yapplabs/ember-wormhole/issues/66#issuecomment-263575168 — committed to knownasilya/bootstrap-modal by knownasilya 8 years ago

Most upvoted comments

@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}}

+18

rwjblue on Nov 29, 2016

Is there a ticket in glimmer for the APIs to move content around and/or tell glimmer to ignore changes to a DOM subtree (or however this is going to work)? I have addons that also teleport content around, and need to figure out how to be compatible with glimmer. Wrapping in a static element doesn’t seem to be enough for me…

shaunc on Feb 20, 2017

FYI - We just submitted https://github.com/tildeio/glimmer/pull/331 to specifically support ember-wormhole for Ember 2.9…

rwjblue on Sep 25, 2016

So put a div around that if

krisselden on Sep 11, 2016