search

disqus / disqus-react

A React component for Disqus
MIT License
365 stars 46 forks source link

DiscussionEmbed has some issues rendering to Html #87

Closed marcofranssen closed 3 years ago

marcofranssen commented 3 years ago

Describe the bug

Disqus fails to load and displays following message on the page. This is probably caused by some things not rendering accordingly to HTML

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

To Reproduce

I have embedded following component in my Next.js page. I'm running on React 17.

import { DiscussionEmbed } from "disqus-react";

export default function DisqusComment({ rootUrl, post }) {
  const disqusShortname = "myshortname";

  const disqusConfig = {
    url: `https://mydomain.com/${post.slug}`,
    identifier: post.slug,
    title: post.title,
    language: "en_US",
  };

  return <DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />;
}

When looking in the html it shows following following output.

<div shortname="myshortname" config="[object Object]" id="disqus_thread">
  <iframe id="dsq-app4987" name="dsq-app4987" allowtransparency="true" frameborder="0" scrolling="no" 
                tabindex="0" title="Disqus" width="100%"
                src="https://disqus.com/embed/comments/?base=default&amp;f=undefined&amp;t_i=remove-files-from-git-history-using-git-filter-repo&amp;t_u=https%3A%2F%2Fmarcofranssen.nl%2Fremove-files-from-git-history-using-git-filter-repo&amp;t_e=Remove%20files%20from%20Git%20history%20using%20git-filter-repo&amp;t_d=Remove%20files%20from%20Git%20history%20using%20git-filter-repo&amp;t_t=Remove%20files%20from%20Git%20history%20using%20git-filter-repo&amp;s_o=default&amp;l=en_US#version=d263308ceb903a20735ee19a49738b60"
                style="width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important; height: 75px !important;" horizontalscrolling="no" verticalscrolling="no">
   </iframe>
</div>

Expected behavior

As seen in previous html output there is a undefined value in the f querystring parameter for the iframe src. Also the config="[object Object]" in the div doesn't seem to be rendered properly into the view as it probably should.

Screenshots

N.A.

Specifications:

Additional context

N.A.

marcofranssen commented 3 years ago

Above code was not compltely representative as I was reading my shortname from an environment variable. I moved that out of this component to a Next.js page so I could populate this from the backend. Now all works as expected.