topic Re: How to configure the dojo loader to use the ArcGIS JavaScript API and local modules? in ArcGIS JavaScript Maps SDK Questions

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

JonathanBailey — Sat, 11 Dec 2021 16:05:34 GMT

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?

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:05:36 GMT

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

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

JonathanBailey — Sat, 11 Dec 2021 16:05:39 GMT

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.

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

RobertScheitlin__GISP — Mon, 23 Jan 2017 17:25:14 GMT

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.

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

JonathanBailey — Sat, 11 Dec 2021 16:05:42 GMT

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.

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

Anonymous User — Sat, 11 Dec 2021 16:05:44 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

RobertScheitlin__GISP — Fri, 31 Mar 2017 20:59:18 GMT

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.