Console error when making addon component

1

I’m getting this error when I click on my power-select-multiple on the app : Uncaught (in promise) Error: Assertion Failed: You cannot pass a null or undefined destination element to in-element.

I am simply copying my existing code which works, into an addon component so I am unsure why I get this error. How can I fix this?

3

What version of ember do you have in both your app and addon? And are the power select versions the same in both app and addon? It’s hard to debug something like this without more information and/or some code

4

ember-cli: 3.21.2 and ember-power-select: 4.0.6

My addon has a component ‘my-calendar’ which simply has the code from my existing app, in the addon/component directory. Even if I try using a small bit of code :

I still see the error. Not sure how exactly to fix this error since I am specifying the required arrays for power-select, just like how I did in my app which I’m converting to an addon.

5

Hmmmm is any of your code using {{in-element}}? That’s a new feature added in Ember 3.20 and it doesn’t look like power select is using it (power select uses ember-wormhole) but I’m not 100%. Do you have any other power select plugins or addons or custom components?

6

None of my code is using {{in-element}} and I tried commenting out all my code except for a power-select and the error still displays, leading me to believe it’s power-select that is using it.
edit: So the app works if I install ember-power-select on the app which tests my addon. My question now is, why did I need to install it on the app? Because for my addon, I cant expect the user to install this on their end. Shouldnt it have automatically installed since the addon has the power-select in #devDependencies and #dependency?

7

The addon should only have power-select in dependencies. Other than that I would expect the same thing you do, that the consuming app shouldn’t need power select installed as it should be installed and built with the addon.

8

so its a bug? i guess i will open an issue about it

9

did you try it with ember-power-select in only the dependencies hash of the addon’s package.json?

10

Yeah tried that. Maybe its because ember-basic-dropdown is a nested component of power-select so I guess I have to read if there’s anything on nested addons.

11

edit: for anyone who has the same issue, add a contentFor hook for ember-power-select since it was not automatically detected for some reason

12

hmmm that’s very strange but glad you got it working!

13

Could you please tell exactly what you did to fix it?

14

@bmaehr do you have any more details about your specific error you could share? You could try looking at the power select troubleshooting steps

15

I have exactly the same error and I have been searching for the information what

means.

16

did you try this, as outlined in the power select troubleshooting steps?

If your application is deviating from the standard approach (by example if you’re attaching your app to a specific node) this approach might not work for your and you’ll need to add a <div id="ember-basic-dropdown-wormhole"></div> manually in your application.hbs .

17

Did you get it working?

What I did is, in the index.js, I added the following contentFor hook, such that my index.js looks like this

module.exports = {
  name: require('./package').name,

  included () {
    this._super.included.apply(this, arguments);
  },
  contentFor(type, config) {
    let emberPowerSelect = this.addons.find((a) => a.name === 'ember-power-select');
    
    return emberPowerSelect.contentFor(type,config);
  }
};