I have a java script function test1.js. The function loads external scripts on demand and injects it in the head. As part of the vendor documentation we need to load few scripts in the html head and One of the external script is loaded as follows
<script>esmDefine(["https://website1.com/web1-component.js"]);</script>
I want to do the same in java script and inject the above line in the html tag.
I tried the following
let scriptElement = document.createElement('script') scriptElement.textContent = 'esmDefine(["https://website1.com/web1-component.js"])' document.getElementsByTagName('head')[0].appendChild(scriptElement);
Tried scriptElement.innerText, scriptElement.innerHtml etc but nothing worked as expected.
Result expected will be
<html>
<head>
<script>
esmDefine([
"https://website1.com/web1-component.js",
]);
</script>
...
</head>
Any ideas in this regard is appreciated
I guess you're facing this issue because you're trying to append a script tag in your head tag, that has a function call within it, so as soon as your script tag is injected into the head of your page, the page tries to execute the esmDefine function. But there must be some other external script file that has it defined, as you're saying that you've not defined it anywhere on your own. Then in order for this function to execute, the base declaration for this needs to present there, I mean the page's JavaScript renderer should know how to execute this function and the file that has this functions definition, is an external script file that you linked to your page, but how JavaScript rendering works is, it first parses the page (HTML, CSS, JavaScript (everything that is there on the page)), that you've added as inline to the page, not the external files. Then when everything is done loading then it goes on to fetch the external references and add those later to the CSS Object Model & JavaScript Object Model. But since you're adding this function call as internal to your page, it'll immediately try to execute it and will fail since the definition to this function (the external script file) is not yet loaded. You can try appending this script tag (with your esmDefine) to your page's head inside the window's load event listener. This will be fired only when everything on the page, including the dependent external resources are done loading on to the page. This way you'll not encounter this not defined ReferenceError.
I hope this will help you to move forward.
If you want to import a js script in a script tag I think you could import it or use a src="" if you do not need to interact with the script and know how it behaves.
Maybe try something like:
<html>
<head>
<script>
import esmDefine from 'https://website1.com/web1-component.js'
// esmDefine() ?
</script>
...
or :
<html>
<head>
<script>
import { esmDefine } from 'https://website1.com/web1-component.js'
// esmDefine() ?
</script>
...
or :
<html>
<head>
<script src='https://website1.com/web1-component.js'/>
...