React useEffect appended script not triggering

Question

I am trying to load a script that once triggered generates an iframe and a weather widget. I can get the script properlly appended, but it does not get called and does not generate the iframe

I've tried just adding the script directly in the render, it will load the iframe briefly then switch back to the script tag

const City = ({ content, schema }) => {
  useEffect(() => {
    let script = document.createElement("script");
    script.src =
  "https://darksky.net/widget/graph-bar/32.7174,-117.1628/us12/en.js?width=100%&height=400&title=Full Forecast&textColor=333333&bgColor=FFFFFF&transparency=false&skyColor=undefined&fontFamily=Default&customFont=&units=us&timeColor=333333&tempColor=ff8200&currentDetailsOption=true";
    script.async = true;

    document.getElementById("widget").appendChild(script);
  }, [])

  return (<div id="widget"></div>);
};

export default City;

Answer 1

Notice the warning displayed in console:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

See Execute write on doc: It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.