How to configure the dojo loader to use the ArcGIS JavaScript API and local modules?

JonathanBailey · ‎01-23-2017

I have an HTML page that uses the ArcGIS JavaScript API 3.19. I've also created a custom module which includes my own code. The files are organized as follows:

index.html
/js

SearchExtent.js

In my HTML file, I'm referencing both the ArcGIS JavaScript API and my custom JavaScript file as follows:

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8" />
 <link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
 <script src="https://js.arcgis.com/3.19/init.js"></script>
 <script src="js/SearchExtent.js"></script>
 <script>
 require([‍‍‍‍‍‍‍‍‍‍‍‍
    "js/SearchExtent", 
     ...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

When I load the web page, I'm getting a 404 error (reported in the console) that indicates that the following resource can't be found:

https://js.arcgis.com/3.19/js/SearchExtent.js

It appears as though the dojo loader is looking for my custom JavaScript file on js.arcgis.com. I've been led to believe that this is an issue with the dojo configuration.

When I attempt to configure dojo as per the dojo toolkit documentation to load both CDN and custom modules, like so:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
    <script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/blank.html',
        packages: [ {
            name: 'custom',
            location: location.pathname.replace(/\/[^/]+$/, '') + '/js/custom'
        } ]"
            src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <script src="https://js.arcgis.com/3.19/init.js"></script>
    <script src="js/SearchExtent.js"></script>
    <script>
        require([
            "custom/SearchExtent",
            "dojo/domReady!"
        ], function (SearchExtent) {
            console.log("...");
            });
    </script>
</head>
<body>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The browser looks to be trying to load the ArcGIS JavaScript API from the Google CDN.

What's the correct way to configure dojo to use the ArcGIS JavaScript API and custom modules?

JonathanBailey · ‎01-23-2017

HI Richard,

After looking at the ArcGIS JavaScript API documentation here:

Writing a Class | Guide | ArcGIS API for JavaScript 3.19

and the accompanying example here:

http://servicesbeta.esri.com/demos/using-classes-with-javascript/seatgeek-search/

I used the paths property of dojo config, and did not include an explicit reference to SearchExtent:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
    <script>
        var dojoConfig = {
            paths: { js: location.pathname.replace(/\/[^/]+$/, "") + "/js" }
        };
    </script>
    <script src="https://js.arcgis.com/3.19"></script>
    <script>
        require([
            "js/SearchExtent",
            "dojo/domReady!"
        ], function (SearchExtent) {
            console.log("...");
        });
    </script>
</head>
<body>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This seems to load everything correctly.

Thanks,

Jon.

View solution in original post

RobertScheitlin__GISP · ‎01-23-2017

Jonathan,

Here is how I load a custom library that is located in the "js" folder in my main apps folder:

<script>
    var dojoConfig = {
      parseOnLoad: true,
      packages: [{
        "name": "rcolor",
        "location": location.pathname.replace(/\/[^/]+$/, "") + '/js'
      }]
    };
  </script>
  <script src="js/rcolor.js"></script>‍‍‍‍‍‍‍‍‍‍

Notice that you have the location as '/js/custom' that would mean that the SearchExtent.js file is located in the apps js/custom folder like js/custom/SearchExtent.js

JonathanBailey · ‎01-23-2017

Hi Robert,

Thanks for your response. When I place the reference to the ArcGIS JavaScript API before the dojo configuration, like this:

<html>
  <head>
  <title></title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.19"></script>
  <script>
    var dojoConfig = {
      parseOnLoad: true,
        packages: [{
           "name": "SearchExtent",
           "location": location.pathname.replace(/\/[^/]+$/, "") + '/js'
        }]
    };
  </script>
<script src="js/SearchExtent.js"></script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

then dojo appears to be trying to get SearchExtent from js.arcgis.com. However, when I place the reference to the JavaScript API after the dojo configuration, dojo appears to be trying get everything, including the JavaScript and ArcGIS modules from localhost.

RobertScheitlin__GISP · ‎01-23-2017

Jonathan,

You script tag for the JS API has to be after the dojo config is defined. If it is before than dojo is already initialized and the config has no effect. I am not sure why you would be seeing the app trying to load the JS API from the machine locally (based on your script tag)?..

BTW,

If you app is not going to be served using SSL (https) then you should not use https urls for the JS API.

JonathanBailey · ‎01-23-2017

HI Richard,

After looking at the ArcGIS JavaScript API documentation here:

Writing a Class | Guide | ArcGIS API for JavaScript 3.19

and the accompanying example here:

http://servicesbeta.esri.com/demos/using-classes-with-javascript/seatgeek-search/

I used the paths property of dojo config, and did not include an explicit reference to SearchExtent:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
    <script>
        var dojoConfig = {
            paths: { js: location.pathname.replace(/\/[^/]+$/, "") + "/js" }
        };
    </script>
    <script src="https://js.arcgis.com/3.19"></script>
    <script>
        require([
            "js/SearchExtent",
            "dojo/domReady!"
        ], function (SearchExtent) {
            console.log("...");
        });
    </script>
</head>
<body>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This seems to load everything correctly.

Thanks,

Jon.

Anonymous User · ‎03-31-2017

Hi Robert,

I am trying to the same thing as Jonathan. I applied your code above, but I had "multipleDefine" error. I also tried Jonathan's code. It works, but there is a message showing:

"Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/."

I would very much appreciate if you could provide me a proper way to configure custom JavaScript file. It may not be necessary to mention, but I will be using JS API version 4.3.

My code is shown as below:

Folder structure

Application root

-- app/

-- js/

-- main.js

-- index.html

<!DOCTYPE html>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <head>
        <title>Arcgis Javacsript API Samples</title>
        <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
        <script src="http://js.arcgis.com/3.6/"></script>
        <script>
            var dojoConfig = {
            parseOnLoad: true,
            packages: [{
                "name": "main",
                "location": location.pathname.replace(/\/[^/]+$/, "") + '/js'
            }]
            };
        </script>
        <script src="app/js/main.js"></script>
   </head>

    <body class="claro">
        <div id="map"></div>
    </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎03-31-2017

Makiko,

The message you are seeing is normal and can be ignored. It is not something you have control over when using the JS API.