Comments JS not working with static caching and dynamicInclude

[harry2909]

Describe the bug

We have a site hosted on Servd which makes use of static caching. They provide a dynamicInclude twig tag to omit certain parts of a template from the cache.

When including the comments templates via this dynamicInclude, both the css and JS files are not outputted, despite being selected to in the CMS.

{% dynamicInclude '_components/c-comments' %}

The comments template is basically just rendering the comments:

{{ craft.comments.render(entry.id) }}

I've overridden some templates for styling purposes. I've removed certain functionality that wasn't in use, such as the can guest comment code and notify subscribed users code. But other than that, they should be identical.

Due to this, I have opted to render the JS and CSS manually. The CSS does appear to work. The JS file is rendered, but doesn't seem to be actually doing anything. When I press to submit a comment, the page just refreshes without anything happening. I can't see any console errors either. The comments are not saved.

I am wondering if this has some kind of similar interaction as if it were Sprig? I am not sure if that has been looked into.

I've tried rendering the css and JS at the top of the parent template but this doesn't make a difference.

I expect that the JS would still work since its being outputted on the page. Let me know if you need any more information.

Thanks!

Steps to reproduce

1. Include a template which renders the comments using dynamicInclude
2. Select output css and JS in CMS settings
3. Verify nothing is ouputted
4. Manually output css and JS
5. Verify css works, but JS doesn't seem to be doing anything

Craft CMS version

4.4.9

Plugin version

2.0.7

Multi-site?

No

Additional context

• Happens on local uncached version and staging static cached environment
• Example video:

https://github.com/verbb/comments/assets/47326455/513ea452-e3ba-41b9-838e-3b98388b1432

[engram-design]

I was going to mention that the default behaviour is to render the CSS in the header of the page, and JS at the bottom before the body. If you render these alongside your craft.comments.render() call, that would be my first recommendation. (see craft.comments.renderCss and craft.comments.renderJs).

Sounds like the JS bindings aren't working. When rendering comments, you'll have some JS to initialize it.

new Comments.Instance("#cc-w-2460",

That targets the ID of the wrapper div for the render() call. It's worth checking if they match?

[harry2909]

Hey, thanks for the response. Will give this a go this week.

[harry2909]

Hey, I've tested the above and I am getting the same behaviour where pressing submit or any of the comment interactions just reloads the page. I think it really must have something to do with this dynamicInclude. I have also disabled the render css and js in the CMS.

I've tried rendering the css and JS like so within my top level comments component:

{{ craft.comments.renderCss(entry.id) }}
{{ craft.comments.renderJs(entry.id, {}, true) }}
{{ craft.comments.render(entry.id) }}

The bindings are matched, I had to use the inline option to actually see the JS, but the instance ID does match that of the comments div ID.

If it helps, the structure is:

entry.twig:

{% extends '_layouts/generic' %}

{% set entryPoint = 'learn-entry' %}

{# Main content #}
{% block main %}
  {% dynamicInclude '_components/c-comments' %}
{% endblock %}

c-comments.twig with css and js rendered alongside:

{% if entry is defined and entry %}
    <div>
      {{ craft.comments.renderCss(entry.id) }}
      {{ craft.comments.renderJs(entry.id, {}, true) }} // tried false too
      {{ craft.comments.render(entry.id) }}
    </div>
{% endif %}

devtools elements:

<div class="pt-5 pb-10 lg:pb-20 lg:pt-10 max-w-[796px] mx-auto px-9 xl:px-0 items-center w-full my-auto h-full">
  <link href="https://localhost/cpresources/48ddeb86/comments.css?v=1689086432" rel="stylesheet">
  <script src="https://localhost/cpresources/f47fd5f3/comments.js?v=1689086432"></script>
  <div id="cc-w-1662" class="cc-w"><div class="cc-w-i" data-role="comments"><article class="cc-i comment-wrapper" id="comment-30145" data-id="30145" data-site-id="1" data-role="comment" itemprop="comment" itemscope="" itemtype="http://schema.org/UserComments"></div>
  </div>
</div>

Does anything look odd there?

I also tried rendering css in head and js in body:

entry.twig with css and js rendered in head/body:

{% extends '_layouts/generic' %}

{% set entryPoint = 'learn-entry' %}

  {% block headCss %}
    {{ craft.comments.renderCss(entry.id) }}
  {% endblock %}

  {% block bodyJs %}
    {{ craft.comments.renderJs(entry.id, {}, false) }}
  {% endblock %}

{# Main content #}
{% block main %}
  {% dynamicInclude '_components/c-comments' %}
{% endblock %}

I've also tried using the render css and js option directly in my layout template, instead of within this entry template via blocks.

[engram-design]

Hmm. Any chance you can share the URL to this in action? You're welcome to send to support@verbb.io if you'd prefer not to share publicly.

[harry2909]

Hey @engram-design I'll do that thank you. I'll send a link to our staging environment over email :)