Can't find DOM in engine

[jwlawrence]

I'm getting an error when using ember-wormhole inside an ember-engine:

Uncaught Error: ember-wormhole could not get DOM

Looks like the getDOM util doesn't find 'service:-document' and the container lookup of 'renderer:-dom' results in an 'InteractiveRenderer' object that doesn't have a '_dom' property so it throws an error.

I'm not sure if this issue can be solved on the ember-wormhole side or if we need ember-engines to provide a reference to the DOM, but figured I'd leave this here for now.

[lukemelia]

@jwlawrence I'll leave this open. I think this will ultimately be addressed through the use of {{#in-element ...}} ... {/in-element}} when it is ready

[marcemira]

@lukemelia can you link more information about that {{#in-element ...}} ... {/in-element}}, thanks! -- never mind, found some issues about it and that it'll be renamed to -render-portal --

[jbailey4]

@jwlawrence @lukemelia I'm seeing this issue as well when using ember-power-select, which uses ember-wormhole. @marcemira do you have a link to the issues you found regarding {{#in-element ...}} and -render-portal?

[marcemira]

@jbailey4 if you're on ^ Ember 2.10, you can use {{#-in-element aDomElement}} things you want appended to 'aDomElement' {{/-in-element}}. Totally private, shouldn't be used... but hey! it works!

[jbailey4]

@marcemira Thanks!

[dustinfarris]

This affects ember-power-select

[dbashford]

@jbailey4 given you are using power-select, what did the fix for this entail? About to dig in and the suggestion didn't make perfect sense to me.

[dbashford]

So, as mentioned above, it is erroring because the -document service cannot be found.

For giggles, I tossed that in as a dependency for the engine and it worked.

engines: {
  foo: {
    dependencies: {
      services: [
        '-document',
      ]
    }
  }
}

I'm inexperienced with some of the internals of all this, both with that particular service and with engines, so I feel like there may be some pitfalls to doing it this way?

[jwlawrence]

Heh, I'm surprised that works. Not sure what the potential pitfalls of that approach are, but it seems dirty :)

I did come across this fork that leverages the -in-element component: https://github.com/mitchlloyd/ember-wormhole/commit/a70eea5f3f050a927d377c35145ffb1a7b251c0d

Haven't tried it yet, but it looks promising. Based off the diff it looks like there might be some issues with the tests though. @mitchlloyd do you plan to open a PR for that fork at some point?

[mitchlloyd]

@jwlawrence I'd be happy to open a PR based on that branch, but all of this is dependent on changes in core. The 2 failings tests are expecting the DOM nodes to be reused when moving wormhole output from 1 location to another. This will work for most use cases, but if you were editing a form and then moved the wormhole output to another location you will loose focus on the current field.

This is the issue that Chris set out to solve here: https://github.com/emberjs/ember.js/pull/14472.

[caseklim]

I'm seeing the following error with a component using ember-wormhole after upgrading to 2.11 from 2.9. It's coming from "glimmer-runtime/lib/bounds" and not from ember-wormhole directly, but perhaps they're related:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at Object.clear (http://localhost:5000/assets/vendor.js:71094:20)
    at UpdatableBlockTracker.reset (http://localhost:5000/assets/vendor.js:71431:56)
    at TryOpcode.handleException (http://localhost:5000/assets/vendor.js:80245:113)
    at UpdatingVMFrame.handleException (http://localhost:5000/assets/vendor.js:80427:35)
    at UpdatingVM._throw [as throw] (http://localhost:5000/assets/vendor.js:80140:37)
    at Assert.evaluate (http://localhost:5000/assets/vendor.js:75509:25)
    at UpdatingVM.execute (http://localhost:5000/assets/vendor.js:80127:24)
    at RenderResult.rerender (http://localhost:5000/assets/vendor.js:80066:16)
    at RootState._this.render (http://localhost:5000/assets/vendor.js:37826:18)
    at runInTransaction (http://localhost:5000/assets/vendor.js:49007:28)

Is there any update on in-element?

[XaserAcheron]

Oof. Ran straight into this one like a brick wall. :P

Another ember-power-select user here; @dbashford's workaround did the trick, fortunately, though that's naturally not a permanent solution. At the very least, that's something future-Googlers can do until in-element stuff hits.

[jwlawrence]

FWIW, updating to Ember 2.11 and ember-engines 0.4 has resolved this issue for me.

[tschoartschi]

I'm using Ember 2.12.0, Ember-CLI 2.12.0-beta.1, ember-power-select 1.5.0 and ember-engines 0.5.0-beta.9 and I still need @dbashford's workaround. I'm not sure if it is a good idea to pass around a private service. Are there any alternatives to -document

[perlun]

I'm using Ember 2.12.0, Ember-CLI 2.12.0-beta.1, ember-power-select 1.5.0 and ember-engines 0.5.0-beta.9 and I still need @dbashford's workaround

The same for me, with Ember 2.12.1 and ember-engines 0.5.0. The workaround worked here as well.

[kkincade]

I've upgraded to 3.15.1 recently and have noticed this error occurring. Does anyone know of an impact here with Glimmer components?