"Uncaught ReferenceError: require is not defined" when adding JSAPI after page load

BradCollins

I am using DOM manipulation to add the following (comments not included; I add them here for clarity):

<!-- ArcGIS JSAPI --> <script async="false" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4compact/"></script> <!-- my application --> <script async="false" src="js/index.js"></script>

to an HTML page after it has loaded. I receive the following error:

Uncaught ReferenceError: require is not defined

when the browser attempts to run index.js, which begins with a require block this way:

var app;  require([     "dojo/ready",

Why am I doing it this way? I am writing a PhoneGap app that runs on an iPad. One requirement of our application is that it run on a private network without access to the Internet. Consequently the location of ArcGIS JSAPI is not fixed.

To handle this problem, I have a Settings bundle that allows the user to set, among other things, the server URL of the ArcGIS server where the JSAPI resides. Then I have some bootstrap JavaScript code that reads the values from the Settings bundle and loads the ArcGIS JSAPI from the location the user has specified:

    function loadScripts(javascripts) {       console.debug("Loading JS");              var arcgisJs = [config.arcgisServerUrl + "/jsapi/arcgis/3.4compact/"],           allJs = arcgisJs.concat(javascripts),  // add other scripts, in this case, index.js           head = document.querySelector("head");                  allJs.forEach(function (jsUrl) {         var tag = document.createElement("script");         tag.setAttribute("async", false);         tag.setAttribute("src", jsUrl);         head.appendChild(tag);       });        console.debug("Finished loading JS");     }

In other words, I load the JSAPI and then my application script (index.js), both of them with async="false". Any ideas why "require" is not defined since I load index.js after the JSAPI?

BradCollins

I got it working with a bit of a hack suggested by a coworker. Apparently there is some asynchrony going on: require is eventually defined, but it isn't at the time my app initialization code starts running. So I check the "require" variable every 50 ms and move on when it finally is defined:

  function waitForRequireToBeDefinedThenProceed() {     if ("undefined" == typeof require) {       console.debug("'require' still not defined. Waiting ...");       setTimeout(waitForRequireToBeDefinedThenProceed, 50);     } else {       console.debug("'require' finally defined. Moving on.");       defineAndInitializeApp();     }   }

I should still be glad for a more elegant solution if anyone has a suggestion.