Comments iframe not rendering in local dev

Developer help
1

Hello,

I’m familiarising myself with the codebase have successfully got a local setup by following Ghost Docs. I was planning to have a go at fixing if all comments are hidden, no comments (not even hidden ones) are visible · Issue #22331 · TryGhost/Ghost · GitHub.

However, the comments section is not rendering below a post. It looks like this is a separate app loaded into an iframe. Is there some additional setup required to get this working locally?

The hbs template post.hbs has:

    {{#if comments}}
        <div class="gh-comments gh-canvas">
            {{comments}}
        </div>
    {{/if}}

And the rendered HTML is:

<div class="gh-comments gh-canvas"></div>

Which is suggesting the comments variable is present in the template but empty.

Further info:

  • I’ve got " Who can comment on posts?" set to “All members”
  • Tried running with yarn dev --comments (after running yarn in apps/comments-ui)

Additionally I see the announcement bar isn’t shown if I set one which suggests I’m missing a step to get these microfrontend components working locally.

Any ideas?

2

You’re correct about it being a separate app in an iframe. That code lives at apps/comments-ui

It’s probably worth confirming in Ghost admin (under the gear icon > access ) that you have comments set to members.

The code that should produce the script tag within the gh-comments div has not been changed in several years:

So, please check the access setting! Having it off would give exactly the behavior described.

3

It’s probably worth confirming in Ghost admin (under the gear icon > access ) that you have comments set to members.

I double checked and I do have it set to “All members”.

Thanks for pointing me to the comments template helper. So what I’m seeing is that this.comment_id is null, hence the early return here:

    // todo: For now check on the comment id to exclude normal pages (we probably have a better way to do this)
    const commentId = this.comment_id;
    if (!commentId) {
        return;
    }

I don’t yet understand why a post page (e.g. http://localhost:2368/sit-quae-dolore-a-aspernatur-dolor-molestiae-quia-eligendi-726/) would have a comment id in its context.

However, if I comment that early return out then the comments app renders which unblocks me to look at what I was originally aiming to do.

Thanks for your help

1 Like
4

FYI I’ve attempted a fix for the aforementioned bug here: 🐛 Fixed if all comments are hidden, no comments are visible by djskinner · Pull Request #22912 · TryGhost/Ghost · GitHub

1 Like