Using esri with requirejs and without dojo causing errors

DanielPritchett · ‎03-03-2014

SO I'm working on getting esri geolocation library separated from using dojo and it's require modules to make it more compatible with my stack involving things that need to be shimmed. I've downloaded the arcgis_compact library and require js and defined my config as follows

require.config({
    baseUrl: "lib",
    paths: {
        "knockout": "//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min",
        "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min",
        "dojoMain": "arcgis_compact/js/dojo/dojo/dojo",
        "dojo": "arcgis_compact/js/dojo/dojo",
        "esri": "arcgis_compact/js/esri"
    },

    shim: {
        "knockout": {
            exports: "ko"
        }
    }
});

when I require certain modules I get some errors when dojo requires some of the base javascripts. Some of them seem to be dojo's require kicking in and not finding some of what I configured, others are missing modules all together.

ManishkumarPatel · ‎03-03-2014

SO I'm working on getting esri geolocation library separated from using dojo and it's require modules to make it more compatible with my stack involving things that need to be shimmed. I've downloaded the arcgis_compact library and require js and defined my config as follows
require.config({
    baseUrl: "lib",
    paths: {
        "knockout": "//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min",
        "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min",
        "dojoMain": "arcgis_compact/js/dojo/dojo/dojo",
        "dojo": "arcgis_compact/js/dojo/dojo",
        "esri": "arcgis_compact/js/esri"
    },

    shim: {
        "knockout": {
            exports: "ko"
        }
    }
});
when I require certain modules I get some errors when dojo requires some of the base javascripts. Some of them seem to be dojo's require kicking in and not finding some of what I configured, others are missing modules all together.

Hi Daniel,

You will have to provide the URL for the hosted API.

for example

"dojoMain": "http://<yourhostedmachinename>/arcgis_compact/js/dojo/dojo/dojo",
"dojo": "http://<yourhostedmachinename>/arcgis_compact/js/dojo/dojo",
"esri": "http://<yourhostedmachinename>/arcgis_compact/js/esri"

let me know if this works.

Best Regards,
Manish

DanielPritchett · ‎03-04-2014

That is what I am doing in my example. The base URL is my "lib" folder and I provide the urls. If you look at the screenshot it picks up some of the requires but dojo tries to load some that dont' seem to follow the pattern (requiring _map.js from dojo for example)

Hi Daniel,

You will have to provide the URL for the hosted API.

for example

"dojoMain": "http://<yourhostedmachinename>/arcgis_compact/js/dojo/dojo/dojo",
"dojo": "http://<yourhostedmachinename>/arcgis_compact/js/dojo/dojo",
"esri": "http://<yourhostedmachinename>/arcgis_compact/js/esri"

let me know if this works.

Best Regards,
Manish

ReneRubalcava · ‎03-04-2014

The ArcGIS JavaScript API version of Dojo is an already built version of Dojo, so you cannot replace the Dojo loader with RequireJS. You can apparently use the RequireJS loader with Dojo, but only with the downloaded version and you can specify which loader to use (I have never done this, but that's my understanding).

So in short, you can't use RequireJS with the ArcGIS JS API.

Dojo doesn't provide a "shim" property in the config, but you can fake it like

define('knockout', function() {
  return ko;
});

DanielPritchett · ‎03-04-2014

The ArcGIS JavaScript API version of Dojo is an already built version of Dojo, so you cannot replace the Dojo loader with RequireJS. You can apparently use the RequireJS loader with Dojo, but only with the downloaded version and you can specify which loader to use (I have never done this, but that's my understanding).

So in short, you can't use RequireJS with the ArcGIS JS API.

Dojo doesn't provide a "shim" property in the config, but you can fake it like
define('knockout', function() {
  return ko;
});

Thanks for that, I feared that. It's unfortunate that it's such an opinionated framework but I have no choice

TomWayson · ‎03-04-2014

I've had limited success loading esri modules w/ requireJS using the AMD build of the JS API (i.e. http://js.arcgis.com/3.8amd) using the following config:

require.config({
  paths: {
    "dojo": "../dojo-release-1.9.1-src/dojo",
    "dijit": "../dojo-release-1.9.1-src/dijit",
    "dojox": "../dojo-release-1.9.1-src/dojox",
    "esri": "http://js.arcgis.com/3.8amd/js/esri",
    // NOTE: loading Dojo modules from esri CDN fails
    // have to use local copy of Dojo... for now
    // "dojo": "http://js.arcgis.com/3.8amd/js/dojo/dojo",
    // "dijit": "http://js.arcgis.com/3.8amd/js/dojo/dijit/",
    // "dojox": "http://js.arcgis.com/3.8amd/js/dojo/dojox/"
  }
});

I've pushed what I have so far up on GitHub here: https://github.com/tomwayson/esri-require-js

Caveats:

I have only tested this w/ a map, to prove the concept. May be issues w/ other modules.

I've not been able to load the Dojo modules from the CDN, so I've had to download those locally first.

That may be just as well, it would be very slow to load all of those AMD files from the CDN. Ideally, you'd grab the ones you need and bring them down locally first, work from local files in dev.

In fact, if you planned on building the app, you'd have to bring down the Esri modules as well. - Scott Davis has a post on how to do this (though hes using the Dojo loader and build system I would imagine the same principles would apply).

There are some hoops in getting the r.js optimizer to work w/ Esri/Dojo CDN, which may also apply when doing a local build - maybe not. See this repo for more info: https://github.com/robertd/esri-jsapi-rjs-example

Tom

ReneRubalcava · ‎03-04-2014

Ooh, I forgot about the AMD build, nice catch Tom!
I think I tried in vain once to compile the EsriJS API locally (when running our requirejs experiments), but it wasn't using the AMD build.

TomWayson · ‎03-04-2014

Yeah, I started on this a while back, but once I realized how slow it was going to be to work w/ un-built Esri/Dojo modules, I didn't go much further with it.

I suppose the next step would be to download the Esri AMD files from the CDN and use r.js to build, but I'm not sure at that point why you would do that instead of a Dojo build.

Hopefully if there's any use for this, people will fork the repo and make some PRs.

BTW - nice tip on faking the shim. I've always liked that feature of require js.

ErwinSoekianto · ‎03-04-2014

This sample below show how to use if there is another version of Dojo in the page, but I guess we can use the same technique for this.

https://github.com/esoekianto/twoDojos

require({
packages : [
         { name: "esri", location: "http://js.arcgis.com/3.8/js/esri" },
   { name: "dojo", location: "http://js.arcgis.com/3.8/js/dojo/dojo" },
   { name: "dijit", location: "http://js.arcgis.com/3.8/js/dojo/dijit" },
   { name: "dojox", location: "http://js.arcgis.com/3.8/js/dojo/dojox" }
]
   },