I’m a noob at this sorry I used ask discourse to ask: in a theme i want to render the first post from two topics above the topic list in the discovery-list-container-top Outlet it gave me several versions which to my eyes looked like it should work. All are throwing an error in the preview. I ask discourse: how would I put the sample code in the JS tab instead of files? it gave me this version import { apiInitializer } from "discourse/lib/api"; import Component from "@glimmer/component"; import { tracked } from "@glimmer/tracking"; class FirstPosts extends Component { @tracked posts = []; constructor() { super(...arguments); this.loadPosts(); } async loadPosts() { let topicIds = [123, 456]; // change to your topic IDs let posts = []; for (let id of topicIds) { let res = await fetch(`/t/${id}.json`); let data = await res.json(); if (data.post_stream && data.post_stream.posts.length > 0) { posts.push(data.post_stream.posts[0]); } } this.posts = posts; } static template = {{#each this.posts as |post|}} {{post.topic_title}} {{{post.cooked}}} {{/each}} ; } export default apiInitializer("0.11.1", api => { api.renderInOutlet("discovery-list-container-top", FirstPosts); }); and when I pasted the error code into ask discourse it gave me this version import { apiInitializer } from "discourse/lib/api"; // Global data store (hacky, but works for the JS tab) window.firstPostsData = []; fetch("/t/123.json") .then(r => r.json()) .then(data => window.firstPostsData.push(data.post_stream.posts[0])); fetch("/t/456.json") .then(r => r.json()) .then(data => window.firstPostsData.push(data.post_stream.posts[0])); export default apiInitializer(api => { api.renderInOutlet("discovery-list-container-top", {{#each (theme-prefix "firstPostsData" window=true) as |post|}} {{post.topic_title}} {{{post.cooked}}} {{/each}} ); }); Can someone tell me what I’m doing wrong? the error in the console was: Compile error: SyntaxError: /theme-4/discourse/api-initializers/theme-initializer.gjs: this is what showed in the preview [image] Thank you

I tried let and the result was the same. It’s just that I’d normally use const when using fetch() or ajax(). I believe the error comes from the static template = line. With it, I get: [THEME 10283 'Pokemon Theme'] Error: connector component has no associated template. Ensure the template is colocated or authored with gjs. at h (plugin-connectors.js:35:11) at eY.renderInOutlet (plugin-api.gjs:1116:5) at todo.gjs:43:7 at eH (plugin-api.gjs:3363:10) at Object.initialize (api.js:21:14) at i.initialize (app.js:265:28) at index.js:379:19 at e.each (index.js:183:7) at e.walk (index.js:112:10) at e.each (index.js:59:20) at e.topsort (index.js:65:10) at iL._runInitializer (index.js:392:11) at iL.runInstanceInitializers (index.js:377:10) at l._bootSync (instance.js:116:22) at iL.didBecomeReady (index.js:784:18) at invoke (index.js:262:14) at m.flush (index.js:180:11) at g.flush (index.js:334:19) at z._end (index.js:762:32) at _boundAutorunEnd (index.js:499:12) And if I just use directly, there’s no error. I don’t think using static template is valid here, so just using the template tag directly works.

I’ve tweaked it and this seems to work: import Component from "@glimmer/component"; import { tracked } from "@glimmer/tracking"; import { htmlSafe } from "@ember/template"; import { ajax } from "discourse/lib/ajax"; import { apiInitializer } from "discourse/lib/api"; class FirstPosts extends Component { @tracked posts = []; constructor() { super(...arguments); this.loadPosts(); } async loadPosts() { let topicIds = [123, 1807]; // change to your topic IDs let posts = []; for (constid of topicIds) { const data = await ajax(`/t/${id}.json`); if (data.post_stream && data.post_stream.posts.length > 0) { posts.push(data.post_stream.posts[0]); } } this.posts = posts; } {{#each this.posts as |post|}} {{post.topic_title}} {{htmlSafe post.cooked}} {{/each}} ; } export default apiInitializer((api) => { api.renderInOutlet("discovery-list-container-top", FirstPosts); }); [image] EDIT: Now using ajax() and htmlSafe instead of triple curly braces.

Thank you Nate! I’m trying to figure out what you changed Your code seems to match my first version You have replaced let with const in the for loop is that correct? ask discourse version throws error for (let id of topicIds) { let res = await fetch(`/t/${id}.json`); let data = await res.json(); if (data.post_stream && data.post_stream.posts.length > 0) { posts.push(data.post_stream.posts[0]); } } Nate’s version runs for (let id of topicIds) { const res = await fetch(`/t/${id}.json`); const data = await res.json(); if (data.post_stream && data.post_stream.posts.length > 0) { posts.push(data.post_stream.posts[0]); } } Can anyone explain what is wrong? Why Let wouldn’t work and const does? Thanks again Nate

I foolishly deleted the version I was testing and now I can’t get Nate’s most recent version to run theme-initializer.gjs:18 Uncaught (in promise) ReferenceError: constid is not defined at n.loadPosts (theme-initializer.gjs:18:10) at new n (theme-initializer.gjs:12:10) at h.createComponent (index.js:259:12) at $.create (index.js:419:28) at Object.evaluate (index.js:985:23) at Object.evaluate (index.js:103:106) at tr.evaluateSyscall (index.js:2873:20) at tr.evaluateInner (index.js:2852:64) at tr.evaluateOuter (index.js:2849:10) at tH.next (index.js:4167:45) at tH._execute (index.js:4157:21) at tH.execute (index.js:4133:41) at tq.sync (index.js:4194:120) at tz.render (index-BCp6wOJU.js:4636:43) at index-BCp6wOJU.js:4934:16 at eX (index.js:2414:7) at tG._renderRoots (index-BCp6wOJU.js:4914:7) at tG._renderRootsTransaction (index-BCp6wOJU.js:4962:12) at tG._renderRoot (index-BCp6wOJU.js:4904:10) at tG._appendDefinition (index-BCp6wOJU.js:4828:10) at tG.appendOutletView (index-BCp6wOJU.js:4818:10) at invoke (index.js:264:14) at m.flush (index.js:180:11) at g.flush (index.js:334:19) at z._end (index.js:762:32) at _boundAutorunEnd (index.js:499:12) this very first version is the only one I can get to run import { apiInitializer } from "discourse/lib/api"; import Component from "@glimmer/component"; import { tracked } from "@glimmer/tracking"; class FirstPosts extends Component { @tracked posts = []; constructor() { super(...arguments); this.loadPosts(); } async loadPosts() { let topicIds = [98, 239]; // change to your topic IDs let posts = []; for (let id of topicIds) { const res = await fetch(`/t/${id}.json`); const data = await res.json(); if (data.post_stream && data.post_stream.posts.length > 0) { posts.push(data.post_stream.posts[0]); } } this.posts = posts; } {{#each this.posts as |post|}} {{post.topic_title}} {{{post.cooked}}} {{/each}} ; } export default apiInitializer((api) => { api.renderInOutlet("above-main-container", FirstPosts); }); I am trying to use the theme JS tab to do this maybe I should switch to a theme on gitthub, is that where my limitation is?

[image] NateDhaliwal: I tried let and the result was the same. It’s just that I’d normally use const when using fetch() or ajax(). Yes, let and const are effectively identical here so that’s not the issue.

I believe (in theme components and plugins) you can only include templates with that syntax in a standalone .gjs file as that suffix flags the interpreter to pre-compile it. Not sure how that affects the inbuilt online theme system. Moving to GitHub is in any case a very good idea.

[image] merefield: Moving to GitHub is in any case a very good idea. Thank you for that advice, I am trying to do that now. Getting as far as I have has given me encouragement. Nate’s code above actually runs and puts the two topics on top. I will start a new topic with my theme idea and try to document what I learn. ask.discourse.org is absolutely amazing!

Render a post above the discovery-list-container-top Outlet

Development

merefield (Robert) January 25, 2026, 6:58pm 6

Yes, let and const are effectively identical here so that’s not the issue.

Topic		Replies	Views
Cannot put the template in the desired outlet Development	12	526	October 14, 2024
Modernizing inline script tags for templates & JS API Development dev-news	46	6286	March 25, 2026
Templating of my "component" broke. How do I fix it? Development	14	582	March 17, 2026
Cannot get the js in my component to compile SyntaxError: Private field must be used in an enclosing class Development	14	537	September 21, 2024
Topic Template Placeholder Text theme component Theme component	60	7815	August 21, 2026

Render a post above the discovery-list-container-top Outlet

Related topics