utterance / utterances

:crystal_ball: A lightweight comments widget built on GitHub issues
https://utteranc.es
MIT License
8.66k stars 567 forks source link

Failed to execute 'insertAdjacentHTML' on 'Element': The element has no parent. #624

Open nabi-chan opened 1 year ago

nabi-chan commented 1 year ago

Hello. When I use this plugin in react like this,

export function Comments() {
  return (
    <section
      className="w-full mt-8 print:hidden"
      ref={(element) => {
        if (!element) return;
        const script = document.createElement("script");
        script.setAttribute("src", "https://utteranc.es/client.js");
        script.setAttribute("repo", "KimPinot/plog-comments");
        script.setAttribute("issue-term", "pathname");
        script.setAttribute("label", "comment :speech_balloon:");
        script.setAttribute("theme", "github-light");
        script.setAttribute("crossorigin", "anonymous");
        script.setAttribute("async", "true");
        element.replaceChildren(script);
      }}
    />
  );
}

This error always shown :(

Uncaught DOMException: Failed to execute 'insertAdjacentHTML' on 'Element': The element has no parent.
    at https://utteranc.es/client.js:1:1821
    at https://utteranc.es/client.js:1:2220

Then, How can I fix it?

shafqatalix commented 1 year ago

This is working for me

image