How can I fix this AMD path conflict?

Question

I am trying to use the Esri ArgGis JavaScript API, which is loaded by Dojo, using dojo.require. I have an existing modular AMD/requirejs Typescript application that I need to integrate this code into. At the top of my initial TS file, I import several modules:

import tracer = module('../classes/trace');
import pubsub = module('../classes/pubsub');
import masker = module('../classes/masker');
// etc.

This was working fine, but now that I have added the ArcGis code, instead of resolving the relative path within my application, require.js has picked up a baseUrl from the Esri site, and tries to load:

http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/classes/trace.js
// etc.

Resulting in a string of 404 responses and script errors.

How can I fix this?

I've tried setting the requirejs baseUrl in the head of my html file before loading the first document that loads modules:

 <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3"></script>
 <script type="text/javascript" src="/content/client/libs/require.js"></script> <!-- data-main="/content/client/hop/hop.app" -->
 <script type="text/ecmascript">
        require.config({
            baseUrl: "/Content/client/hop/"
        });
 </script>
 <script src="~/Content/client/hop/hop.app.js"></script>

But this fails, throwing an exception that require has no method config.

(NB If I reverse the order in the head of the html document so that the arcgis api comes last in the load sequence then I get the opposite problem - my local files all work fine but dojo and the mapping api fail because they are looking for paths relative to my site when they should be searching on the argis server).

Answer 1

I work with Esri's ArcGIS API so I've run into this exact problem. This blog post from dojo helped me out some.

The first issue is that dojo isn't configured the same way requirejs is. It looks for a previously defined dojoConfig to set things up. The second is that Esri's module loading is all set up assuming one basepath, and your code is going to want another. You're going to need a dojo config that looks something like this:

dojoConfig = {
    baseUrl: location.pathname.replace(/\/[^/]+$/, '') + '/Content/client/hop/',  // magic!
    packages: [
        {
            name: 'dojo',
            location: "http://serverapi.arcgisonline.com/jsapi/arcgis/3.3compact/js/dojo/dojo/"
        },
        {
            name: 'dojox',
            location: "http://serverapi.arcgisonline.com/jsapi/arcgis/3.3compact/js/dojo/dojox"
        },
        {
            name: 'esri',
            location: "http://serverapi.arcgisonline.com/jsapi/arcgis/3.3compact/js/esri"
        }
    ]
};

What this is doing is setting the basepath back to the current url plus your extra stuff, and then telling dojo where esri's stuff is. Those are all the packages that I've run into but if there's a dependency I missed because it just never loaded for me, it will need a similar entry.

Another problem you might run into is that if you're used to loading your script locally as file:// now dojo from another domain is going to try to access file:// and the browser is going to shut that right down. You'll need to test on a local http server from now on. On Windows I prefer HFS and on Linux python makes it easy.

I hope this helps.

Answer 2

I've had several problems using dojo together with requirejs because of the require() conflicts between the two. You should take a look at dojo bug 15616. You might want to look at this thread from google groups in which James suggest all dojo or all requirejs.

I'm not sure what version of dojo you're using but checking out from source is advised as there are changes related to requirejs/dojo that are not in the published 1.8.

If your only problem is 404 errors caused by the baseUrl conflict a workaround would be creating a .d.ts file that aliases a path like ../classes/trace and replaces it with a path that works (absolute or otherwise).