I am dynamically adding scripts with the function below:

function loadScript(scriptUrl) {
    const body = this.document.getElementsByTagName('body')[0];
    const script = this.document.createElement('script');
    script.id = elmName;
    script.src = `${scriptUrl}`;
    script.async = false;
    script.defer = true;
    script.onload = () => {console.log("LADEDED: " + scriptUrl);}
    body.appendChild(script);
}

The loaded scripts call functions that are defined after them. They work well when i normally add to html. But if i add scripts dynamically with the above function, it gives undefined error for calling functions defined after the call.

With the logging on dynamic script load, i saw that (dynamically added) scripts starts executing before their file is fully loaded. Thus the undefined error comes before "LOADED:" log.

I tried to turn async loading off, and defer. Still same problem.