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 <h1>Hi</h1>, but even that won’t show up. What is going on?
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
api.renderInOutlet("above-main-container", <template><h1>Hi</h1></template>);
});
I’ve omitted the component import because it doesn’t render with/without it.
I honestly don’t know what I’m doing wrong.
I am incredibly blind. The file was in api_initializers, not api-initializers 
.
Great… now my component isn’t rendering…
Does anyone have any ideas?
My api-initializers file:
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:
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;
}
}
<template>
{{#if this.showHeader}}
<div class="category-title-header category-banner-{{this.args.category.slug}}" style="{{this.getHeaderStyle}}">
<div class="category-title-contents">
<div class="category-logo aspect-image">
<img src="{{this.logoImg}}">
</div>
<div class="category-title-name">
{{#if this.ifParentProtected}}
{{icon this.lockIcon}}
{{/if}}
{{#if this.ifParentCategory}}
<a class="parent-box-link" href="{{this.args.category.parentCategory.url}}">
<h1>{{this.args.category.parentCategory.name}}: </h1>
</a>
{{/if}}
{{#if this.ifProtected}}
{{icon this.lockIcon}}
{{/if}}
<h1>{{this.args.category.name}}</h1>
</div>
<div class="category-title-description">
{{#if this.catDesc}}
<div class="cooked">
{{this.args.category.description}}
</div>
{{/if}}
</div>
</div>
<div class="category-about-url">
<a href="{{this.args.category.topic_url}}">{{this.aboutTopicUrl}}</a>
</div>
</div>
{{/if}}
</template>
}
Everything looks technically correct, so why doesn’t it render 
..?
This may look familiar… yes, I’m trying to switch widgets for Glimmer components.
How do you conclude that it looks correct, did you follow basic steps?
@nolo So I’ve fixed everything (except for some vague Prettier errors:
Any ideas?
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.
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.
Yes, sorry for not including that earlier. That would be:
(The fix-compatibility-issues-new-new branch.)
Thanks, I’ll take a closer look into that.
@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 @nolo !
Seems to work fine now 
I still get some undefined errors in the console. You should use optional chaining with the ?. operator when looking up nested structures. For example:
this.args.category.description?.replace
I also just saw that error when there is no category description. Thanks for the suggestion!