Ember-power-select: ember-wormhole failed to render into '#ember-basic-dropdown-wormhole' because the element is not in the DOM

[jcope2013]

When I try to add a dropdown to my application I get this error

ember-wormhole failed to render into '#ember-basic-dropdown-wormhole' because the element is not in the DOM

I am on ember-power-select 0.5.2 and ember 1.13.11

is it expected <div id="ember-basic-dropdown-wormhole"></div> is added by us to the body (that didnt seem to work) or the addon? should I add ember-wormhole as a dependency to my application?

[cibernox]

Ember-power-select tries to add that div to the body using the {{content-for "body-footer"}} placeholder in the index.html of your app, but this only works if your app is a standard app rendered in the body of the page.

Are you attaching your app to a different html element?

[jcope2013]

thanks that did it

[knownasilya]

Helped me as well. Seems like the project was updated incorrectly at some point and the body-footer was removed.

[jackmatt2]

I am on [email protected]. I can see the {{content-for "body-footer"}} in my index.html but I am still getting this error when I click on the ember-power-select input.

[knownasilya]

Seems like a different issue, since @jcope2013 and I were both on 1.13

[jackmatt2]

Was able to fix using renderInPlace=true as described here. Not sure why that would fix the issue though.

[jcope2013]

@jackmatt2 try to restart your ember server? the index.html might not be properly reloaded depending on your cli version, also what version of power select are you on?

[jackmatt2]

I am on the latest "0.7.2". I tried restarting but the same issue occurred. I have installed this into an ember-addon project. I wonder if this is causing the isssue?

[cibernox]

@jackmatt2 so, you are building an addon that depends in ember-power-select, and in the final app you install only your addon, correct?

If that is so, I know why is failing.

ember-basic-dropdown (used internally by ember-power-select) uses the contentFor hook for adding the placeholder div. But because of the way ember-cli works (and I think that it is intended), only the hooks of the direct dependencies of your app are run.
That is why ember-power-select has to define the contentFor hook and call the contentFor of ember-basic-dropdown explicitly: https://github.com/cibernox/ember-power-select/blob/master/index.js#L23-L28

If your addon includes ember-power-select, you need to do the same and define the contentFor hook and in there, search among the addons for ember-power-select and invoke its contentFor.

Then, the chain will be your-addon ---> power-select --> basic-dropdown

[knownasilya]

@miguelcobain nice tip. I'll keep this in mind when building addons as well :+1:

[jackmatt2]

@cibernox yes - this has to be the issue, I will try this out Monday. I am having a similar issue with the vendor css files (no just this project - others too), I had to copy them to my addons addon/scripts folder to get them working in the consuming projects. I wonder if there is something similar to the contentFor hook to get the vendor files propagating properly also?

[cibernox]

@jackmatt2 I can confirm. The trees of nested addons work because they are merged recursively into the tree of its parent, until they end up in the app tree, but no hook is invoked, meaning that if the addon is using app.import in those to add files, it will fail.

[jackmatt2]

@cibernox this is now fixed using your suggestion.

     contentFor: function(type, config) {
            if (type === 'body-footer') {
              var emberBasicDropdown = this.addons.filter(function(addon) {
                return addon.name === 'ember-power-select';
              })[0];
              return emberBasicDropdown.contentFor(type, config);
            } else {
              return '';
            }
        }

[cibernox]

:tada:

[Datamance]

I'm having this same issue, it's bizarre and really friggin annoying:

[cibernox]

@Datamance That seems a different issue. You DO have a wormhole placeholder in your DOM.I have no idea why you get that error message.

Can you create a reproducible example?

[cibernox]

@Datamance the only theory I have is that you have an old version of wormhole in your project. Either because you are including it expressly or because you other addon that depends on it has the version locked to < 0.4

[Datamance]

@cibernox I'd agree with you except this _suddenly_ started happening. Wasn't happening last week, pretty much nothing changed in my build, and then bam I start getting this error.

Thought it was a problem with watchman, but idk.

Is there any way I can check the (implicitly included) version (since I didn't explicitly declare in my package.json)

[cibernox]

One trick I use is generate a npm-srhinkwrap.json (even if I don't use shrinkwrap) to see how dependencies were resolved along with it's version easily.

[rafaelbnp]

I'm having the same issue
Uncaught Error: ember-wormhole failed to render into '#ember-basic-dropdown-wormhole' because the element is not in the DOM

The problem I think is that my app is a Wordpress app that drops the Ember client into several existing Wordpress pages.

When I'm running the Ember app alone I don't have the issue and I can find the ember-basic-dropdown-wormhole div in my body tag, but when I'm running the whole Wordpress app the error is thrown when I click on the dropdown and I don't see that div anywhere.

Any idea how to fix that?

Let me know if you need more information. Thanks!

[cibernox]

@rafael-paiva If when you add your app into wordpress the div is not there, you can add it yourself, in the application template. You can even add it in your wordpress page. The closer to the body the better. Just put <div id="ember-basic-dropdown-wormhole"></div> somewhere.

[rafaelbnp]

@cibernox sounds like a plan! Let me try that and I'll update here if it works. Thanks dude!

[rafaelbnp]

@cibernox I actually fixed by setting renderInPlace=true. IMH cleaner than manually add a div to my template. Thanks very much for your quick response!

[cibernox]

@rafael-paiva That works, but take into account that it's not equivalent. When rendering the component in place the dropdown will be constrained by z-index and regular overflow rules as the rest of the document. Also, the dropdown won't open above the trigger if there is little space below. Depending on the situation it may or may not be important to you.

[charneykaye]

Hey team, just adding that I found this thread when in fact I had accidentally introduced un unclosed <div> to my app/index.html - and the only noticeable side effect was the failure-to-render of the footer content.

[c-emil]

@cibernox Could you please update your message with link (https://github.com/cibernox/ember-power-select/blob/master/index.js#L23-L28) because it's no longer on lines L23-28 :) so it's a bit confusing, thanks! Maybe just remove the lines since these can change in future as well.

@jackmatt2 thanks very much for the code snippet! Just a note: https://github.com/cibernox/ember-power-select/blob/master/index.js is using .find() now instead of .filter() though.