Script rendered twice

[disqus]

Script rendered twice

[tterb]

@edouardr Could you provide the steps to reproduce this issue?

[edouardr]

hey @tterb in my case, I have the following setup:

• GatsbyJS 2.9.4
• disqus-react 1.0.5

I have a component that looks like below:

import React from 'react';
import { DiscussionEmbed } from 'disqus-react';
import PropTypes from 'prop-types';
import useCurrentPage from '../../hooks/useCurrentPage';
import styles from './disqus.module.scss';

const Disqus = React.memo(function Disqus({ siteUrl }) {
  const { currentPage } = useCurrentPage();

  if (!process.env.DISQUS_SHORTNAME) {
    return null;
  }

  const disqusConfig = {
    identifier: currentPage.fields.codename,
    title: currentPage.elements.jumbotron__title.value,
    url: `${siteUrl}${currentPage.fields.language}/${currentPage.fields.slug}`,
  };

  return (
    <div className={styles.comments}>
      <DiscussionEmbed
        shortname={process.env.DISQUS_SHORTNAME}
        config={disqusConfig}
      />
    </div>
  );
});

Disqus.propTypes = {
  siteUrl: PropTypes.string,
};

export default Disqus;

And a template that looks roughly like this:

import React from 'react';
import PropTypes from 'prop-types';
import { graphql } from 'gatsby';
import { getItemPerLanguage } from '../utils/templateHelper';
import ArticleHeader from '../components/Article/header';
import Disqus from '../components/Disqus/disqus';
import Gallery from '../components/Gallery/gallery';
import Header from '../components/Header/header';
import Layout from '../components/Layout/layout';
import '../components/SEO/SEO';
import useCurrentPage from '../hooks/useCurrentPage';
import useLang from '../hooks/useLang';
import BackToTop from '../components/Article/backToTop';

const Article = React.memo(function Article({ data, pageContext }) {
  const { definePage } = useCurrentPage();
  const { defineLang } = useLang();
  const item = getItemPerLanguage(
    pageContext.language,
    currentArticle,
    data.site
  );

  React.useEffect(() => {
    defineLang(pageContext.language);
    definePage(item);
  }, []);

  return (
    <Layout>
      <Header />
      <article>
        <ArticleHeader article={item} />
        <div className="columns">
          <div className="column is-offset-2 is-8">
            <section className="section ">
              <div
                className="content is-large"
                dangerouslySetInnerHTML={{
                  __html: item.elements.body_text.value,
                }}
              />
            </section>
          </div>
        </div>
        <div className="container">
          <Gallery images={item.elements.images.value} />
          <Disqus siteUrl={item.site.siteMetadata.siteUrl} />
        </div>
        <BackToTop />
      </article>
    </Layout>
  );
});

Article.propTypes = {
  data: PropTypes.object,
  pageContext: PropTypes.object,
};

export default Article;

When the above code loads, I get the embed script loaded twice as mentioned previously.

[tterb]

@edouardr Thanks for the info, Do you have a public repo for this site that I could use to try to reproduce this issue on my end and test out the solution in your PR #26?

If not, I can try using the code you provided but it maybe difficult since it relies on external hooks that could potentially be impacting the functionality.

[edouardr]

@tterb I don't have right now, but I should be able to set a CodePen for it or a dummy repo. Will let you know as soon as I have it.