0

I followed this guide to integrate Disqus comments into my Docusaurus blog. After swizzling, my BlogPostItem component looks like this:

import React from 'react'
import { DiscussionEmbed } from 'disqus-react'
import { useBlogPost } from '@docusaurus/theme-common/internal'
import BlogPostItem from '@theme-original/BlogPostItem'

export default function BlogPostItemWrapper(props) {
  const { metadata } = useBlogPost()
  const { frontMatter, permalink, title } = metadata
  const { comments = true } = frontMatter
  console.log(metadata)


  return (
    <>
      <BlogPostItem {...props} />
      {comments && (
        <DiscussionEmbed
          shortname='https-replica-io-dev-1'
          config={{
            url: permalink,
            identifier: permalink,
            title,
            language: 'en_US',
          }}
        />
      )}
    </>
  )
}

However, the comment section is not working as expected. It displays the following error:

We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.

In the browser console, I see these errors:

Error: Script error for "translations", needed by: core/strings
http://requirejs.org/docs/errors.html#scripterror
GET https://referrer.disqus.com/juggler/stat.gif?event=failed_embed.server.15 net::ERR_BLOCKED_BY_CLIENT
Image
e @ embed.js:49
frame:fail @ embed.js:50
m @ embed.js:49
trigger @ embed.js:49
(anonymous) @ embed.js:49
m @ embed.js:49
trigger @ embed.js:49
(anonymous) @ embed.js:49

Refused to frame 'https://help.disqus.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://intercomrades.support https://intercom.skilljar.com https://academy.intercom.com https://academy.guests.intercom.com https://app.intercom.com https://app.eu.intercom.com https://app.au.intercom.com https://intercomrades.intercom.com https://intercomrades.eu.intercom.com https://intercomrades.au.intercom.com".

Things I've Checked

  1. Verified that the shortname is correct.

  2. Ensured that the permalink, identifier, and title are being passed correctly.

I expected a comment section in the blog post on my Docusaurus website.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.