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
Verified that the
shortname
is correct.Ensured that the
permalink
,identifier
, andtitle
are being passed correctly.
I expected a comment section in the blog post on my Docusaurus website.