Console warnings on load.

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]

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

[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!