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;

Since you are appending to the widget div, why don't you just write the script tag inside the return? — Chris, Sep 18 '19 at 21:33
@Chris I tried that and it triggers, but flashes and goes back to being a script — user3924059, Sep 18 '19 at 22:31

score 1 · Accepted Answer · answered Sep 19 '19 at 07:31

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.

React useEffect appended script not triggering

1 Answers1