# api.renderInOutlet not rendering?
**URL:** https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955
**Category:** Development
**Created:** [June 27, 2025, 7:19am UTC](https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955 "2025-06-27T07:19:12Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [June 27, 2025, 7:19am UTC](https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955/1 "2025-06-27T07:19:12Z")
I’m legitimately freaking out. I am trying to render a .gjs component, but that doesn’t show up. I tried rendering in template tags `Hi
`, but even that won’t show up. What is going on?
```gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
api.renderInOutlet("above-main-container", Hi
);
});
```
I’ve omitted the component import because it doesn’t render with/without it.
I honestly don’t know what I’m doing wrong.
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [June 27, 2025, 7:24am UTC](https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955/2 "2025-06-27T07:24:43Z")
I am incredibly blind. The file was in api\_initializers, not api-initializers :facepalm:.
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [June 27, 2025, 7:38am UTC](https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955/3 "2025-06-27T07:38:11Z")
Great… now my component isn’t rendering…
* * *
Does anyone have any ideas?
My api-initializers file:
```js
import { apiInitializer } from "discourse/lib/api";
import CategoryHeader from "../components/category-header";
export default apiInitializer((api) => {
api.renderInOutlet("above-category-heading", CategoryHeader);
});
```
And my component (.gjs) file:
```gjs
import icon from "discourse/helpers/d-icon";
import Component from "@glimmer/component";
import { inject as service } from "@ember/service";
export default class CategoryHeader extends Component {
@service siteSettings;
get ifParentCategory() {
if (this.args.category.parentCategory) {
return true;
}
}
get catDesc() {
if (settings.show_category_description) {
return true;
}
}
get logoImg() {
if (settings.show_category_logo && this.args.category.uploaded_logo) {
return this.args.category.uploaded_logo.url;
} else if (settings.show_category_logo && settings.show_parent_category_logo && this.args.category.parentCategory && this.args.category.parentCategory.uploaded_logo) {
return this.args.category.parentCategory.uploaded_logo.url;
} else if (settings.show_site_logo && this.siteSettings.logo_small) {
return this.siteSettings.logo_small;
}
}
get ifParentProtected() {
if (this.args.category.parentCategory && this.args.category.parentCategory.read_restricted) {
return true;
}
}
get ifProtected() {
if (this.args.category.read_restricted) {
return true;
}
}
get lockIcon() {
return settings.category_lock_icon || 'lock';
}
get showHeader() {
console.log(this.args.category);
const isException = this.args.category && settings.hide_category_exceptions.split("|").includes(this.args.category.name);
const hideMobile = !settings.show_mobile && this.site.mobileView;
const subCat = !settings.show_subcategory_header && this.args.category.parentCategory;
const noDesc = !settings.hide_if_no_category_description && !this.args.category.description_text;
const path = window.location.pathname;
return (/^\/c\//.test(path)
&& !isException
&& !noDesc
&& !subCat
&& !hideMobile
);
}
get getHeaderStyle() {
let headerStyle = "";
if (settings.header_style == "box") {
headerStyle += "border-left: 6px solid #" + this.args.category.color + ";"
}
if (settings.header_style == "banner") {
headerStyle += "background-color: #" + this.args.category.color + "; color: #" + this.args.category.text_color + ";"
}
if (this.args.category.uploaded_background) {
if (settings.header_background_image != "outside"){
headerStyle += "background-image: url(" + this.args.category.uploaded_background.url + ");"
}
}
return headerStyle;
}
get aboutTopicUrl() {
if (settings.show_read_more_link && this.args.category.topic_url) {
return settings.read_more_link_text;
}
}
{{#if this.showHeader}}
{{/if}}
}
```
Everything looks technically correct, so why doesn’t it render 🤔..?
This may look familiar… yes, I’m trying to switch widgets for Glimmer components.
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [June 27, 2025, 9:39am UTC](https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955/4 "2025-06-27T09:39:56Z")
> [@NateDhaliwal](#):
>
> Everything looks technically correct, so why doesn’t it render 🤔..?
How do you conclude that it _looks_ correct, did you follow basic steps?
1. Check eslint errors and warnings and resolve them
2. Check console errors and warnings and resolve them
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [June 27, 2025, 10:39am UTC](https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955/5 "2025-06-27T10:39:27Z")
> [@manuel](#):
>
> Check console errors and warnings and resolve them
Didn’t see any so I skipped the first one.
Turns out :facepalm:
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [June 27, 2025, 11:28am UTC](https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955/6 "2025-06-27T11:28:11Z")
@manuel So I’ve fixed everything (except for some vague Prettier errors:
) but nothing renders. Still no error in the browser console, except for a warning about
, but I don’t think that could be the cause?
Any ideas?
---
### Author:  [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [June 27, 2025, 4:34pm UTC](https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955/7 "2025-06-27T16:34:58Z")
I’m not sure what your current code is after your fixes, but seeing the warning you’re getting, the `.category-title-header` div should at least be rendering in the DOM.
I recommend inspecting the page in your browser. Also, try tossing in a bunch of `console.log` to see where the application reaches the code. Alternatively, there is a the Ember Inspector browser extension available for Chrome and Firefox that will let you read the component tree.
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [June 27, 2025, 5:44pm UTC](https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955/8 "2025-06-27T17:44:59Z")
> [@NateDhaliwal](#):
>
> Any ideas?
If you can, the easiest way to get feedback on this would be to share your repo. The files you shared above are not stand-alone and require a settings file as well.
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [June 27, 2025, 11:46pm UTC](https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955/9 "2025-06-27T23:46:20Z")
Yes, sorry for not including that earlier. That would be:
[https://github.com/NateDhaliwal/discourse-category-headers/tree/fix-compatibility-issues-new-new](https://github.com/NateDhaliwal/discourse-category-headers/tree/fix-compatibility-issues-new-new)
(The `fix-compatibility-issues-new-new` branch.)
> [@Alteras](#):
>
> I recommend inspecting the page in your browser. Also, try tossing in a bunch of `console.log` to see where the application reaches the code. Alternatively, there is a the Ember Inspector browser extension available for Chrome and Firefox that will let you read the component tree.
Thanks, I’ll take a closer look into that.
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [June 28, 2025, 7:14am UTC](https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955/10 "2025-06-28T07:14:22Z")
@Alteras It’s actually there, but not showing for some reason. Adding `display: block !important` made it appear, but the styling is now quite different 🙁
EDIT: Got the CSS fixed, and the headers are now displaying. Thanks so much @merefield @Alteras @manuel !
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [June 28, 2025, 9:24am UTC](https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955/11 "2025-06-28T09:24:40Z")
Seems to work fine now 👍
I still get some undefined errors in the console. You should use [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) with the `?.` operator when looking up nested structures. For example:
```plaintext
this.args.category.description?.replace
```
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [June 28, 2025, 9:26am UTC](https://meta.discourse.org/t/api-renderinoutlet-not-rendering/371955/12 "2025-06-28T09:26:07Z")
I also just saw that error when there is no category description. Thanks for the suggestion!