Console warnings on load.

[ceiphr]

Hello, This project is fantastic!

I have one gripe, and I'm happy to say it's a small one. I'm running giscus as a component in a Gatsby (React SSR) project. It seems to work perfectly, but there is a warning that comes up when a new post is loaded with giscus at the bottom:

[iFrameSizer][Host page: iFrameResizer0] [iFrame requested init] IFrame(iFrameResizer0) not found

This warning multiplies when new posts are loaded (e.g. the 1st post I click will have none, the 2nd will have one, the 3rd will have two and the 4th will have four).

I believe this means the following line in client.js is being run before the child exists, but I am unsure:

loadScript('https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.min.js', function () {
    return iFrameResize({ checkOrigin: [giscusOrigin], resizeFrom: 'child' });
});

Maybe it's my implementation? Here is the TSX component I've written for handling the script:

import React from "react"

type DataProps = {
  className?: string
}

const Comment: React.FC<DataProps> = ({ className }) => {
  // Used for https://giscus.app/
  // https://creativcoder.dev/how-to-add-github-utterances-blog
  const commentBox = React.createRef<HTMLInputElement>()

  React.useEffect(() => {
    const scriptEl = document.createElement("script")
    scriptEl.async = true
    scriptEl.src = "https://giscus.app/client.js"
    scriptEl.setAttribute("data-repo", "<STUFF>")
    scriptEl.setAttribute("data-repo-id", "<STUFF>")
    scriptEl.setAttribute("data-category", "Announcements")
    scriptEl.setAttribute("data-category-id", "<STUFF>")
    scriptEl.setAttribute("data-mapping", "title")
    scriptEl.setAttribute("data-reactions-enabled", "1")
    scriptEl.setAttribute("data-theme", "preferred_color_scheme")
    scriptEl.setAttribute("crossorigin", "anonymous")
    if (commentBox && commentBox.current) {
      while (commentBox.current.firstChild) 
        if (commentBox.current.lastChild) 
            commentBox.current.removeChild(commentBox.current.lastChild)
      commentBox.current.appendChild(scriptEl)
    }
  })

  return (<div ref={commentBox} className={`comments ${className}`} />)
}

export default Comment

Because these warnings don't affect functionally, this should be a low-priority issue.

Any help with this would be appreciated, thank you!

[ceiphr]

Also, this warning can sometimes occur in Firefox:

Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.

Which is said to be coming from iframeResizer.contentWindow.js:947:8, which is here: https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.js

[laymonage]

Hi @ceiphr, thanks for the report!

I suspect this is because the client script cannot possibly detect if the React component has been unmounted (e.g. when you switch to a new page in a React app), so it cannot do a proper cleanup of the iFrameResizer script.

Anyway, I haven't encountered this issue, though. I'm using it this way, does this work for you?

import React from 'react';

export default function Giscus() {
  const [isMounted, setIsMounted] = React.useState(false);

  React.useEffect(() => setIsMounted(true), []);

  return !isMounted ? null : (
    <div className="giscus">
      <script
        src="https://giscus.app/client.js"
        data-repo="your/repo"
        ...
        crossOrigin="anonymous"
        async
      />
    </div>
  );
}

If the same issue persists, I tried converting the client script into a React component (you need to install iframe-resizer-react if you use this instead), you can try it here: https://gist.github.com/laymonage/c7010900accd2bcdc4a5914213cad9eb

I might package it into an npm package later.

[ceiphr]

Thank you for getting back to me!

The given snippet would inject the code, but it wouldn't load. The given React component works flawlessly! But, I think this line of it should be changed to forwardRef={iframeElement}.

Thank you for this, a npm package would be fantastic.

[laymonage]

@ceiphr Yeah, I forgot about the ref, it shouldn't even be needed. I've published an npm package, see react-giscus. It's my first package on npm, so please let me know if you find any issues. Thanks!

[ceiphr]

I will try it out today and report any issues. Thank you for this!

[ceiphr]

@laymonage it's working, but there is one issue. I will report it on https://github.com/giscus/react-giscus.