# Console error when making addon component

**URL:** https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360
**Category:** Uncategorized
**Created:** [November 18, 2020, 6:29am UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360 "2020-11-18T06:29:03Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![alyssa21](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alyssa21/32/17222_2.png) [@alyssa21](https://discuss.emberjs.com/u/alyssa21)
#### Post date: [November 18, 2020, 6:29am UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/1 "2020-11-18T06:29:03Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [November 18, 2020, 9:34pm UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/3 "2020-11-18T21:34:47Z")

</div>

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

---

<div class="post-metadata">

### Author: ![alyssa21](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alyssa21/32/17222_2.png) [@alyssa21](https://discuss.emberjs.com/u/alyssa21)
#### Post date: [November 18, 2020, 10:03pm UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/4 "2020-11-18T22:03:30Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [November 19, 2020, 3:42pm UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/5 "2020-11-19T15:42:10Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![alyssa21](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alyssa21/32/17222_2.png) [@alyssa21](https://discuss.emberjs.com/u/alyssa21)
#### Post date: [November 19, 2020, 11:52pm UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/6 "2020-11-19T23:52:44Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [November 20, 2020, 7:58pm UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/7 "2020-11-20T19:58:00Z")

</div>

> [@alyssa21](#):
>
> Shouldnt it have automatically installed since the addon has the power-select in #devDependencies and #dependency?

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.

---

<div class="post-metadata">

### Author: ![alyssa21](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alyssa21/32/17222_2.png) [@alyssa21](https://discuss.emberjs.com/u/alyssa21)
#### Post date: [November 20, 2020, 11:51pm UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/8 "2020-11-20T23:51:04Z")

</div>

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

---

<div class="post-metadata">

### Author: ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [November 21, 2020, 3:55am UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/9 "2020-11-21T03:55:27Z")

</div>

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

---

<div class="post-metadata">

### Author: ![alyssa21](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alyssa21/32/17222_2.png) [@alyssa21](https://discuss.emberjs.com/u/alyssa21)
#### Post date: [November 21, 2020, 4:28am UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/10 "2020-11-21T04:28:20Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![alyssa21](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alyssa21/32/17222_2.png) [@alyssa21](https://discuss.emberjs.com/u/alyssa21)
#### Post date: [November 23, 2020, 11:10pm UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/11 "2020-11-23T23:10:49Z")

</div>

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

---

<div class="post-metadata">

### Author: ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [November 25, 2020, 4:46pm UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/12 "2020-11-25T16:46:04Z")

</div>

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

---

<div class="post-metadata">

### Author: ![bmaehr](https://avatars.discourse-cdn.com/v4/letter/b/c77e96/32.png) [@bmaehr](https://discuss.emberjs.com/u/bmaehr)
#### Post date: [June 30, 2021, 4:03pm UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/13 "2021-06-30T16:03:50Z")

</div>

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

---

<div class="post-metadata">

### Author: ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [June 30, 2021, 4:59pm UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/14 "2021-06-30T16:59:14Z")

</div>

@bmaehr do you have any more details about your specific error you could share? You could try looking at the power select [troubleshooting steps](https://ember-power-select.com/docs/troubleshooting/)

---

<div class="post-metadata">

### Author: ![bmaehr](https://avatars.discourse-cdn.com/v4/letter/b/c77e96/32.png) [@bmaehr](https://discuss.emberjs.com/u/bmaehr)
#### Post date: [June 30, 2021, 5:53pm UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/15 "2021-06-30T17:53:10Z")

</div>

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

> [@](#):
>
> add a contentFor hook for ember-power-select

means.

---

<div class="post-metadata">

### Author: ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [June 30, 2021, 6:02pm UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/16 "2021-06-30T18:02:01Z")

</div>

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` .

---

<div class="post-metadata">

### Author: ![alyssa21](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alyssa21/32/17222_2.png) [@alyssa21](https://discuss.emberjs.com/u/alyssa21)
#### Post date: [July 3, 2021, 3:36am UTC](https://discuss.emberjs.com/t/console-error-when-making-addon-component/18360/17 "2021-07-03T03:36:43Z")

</div>

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

```auto
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);
  }
};

```
