dojoLoader multiple define issue #38
Comments
|
Hm... you may have better luck if all your modules are loaded w/in a single require statement, which you can achieve by creating your own custom map directive. You can check out my parcel-map example for reference. |
|
@niblicroad any luck? if not, can you post your code somewhere? |
|
Thank you for the suggestion. I tried moving my code around to only call require from a single directive, and it helped but didn't solve the problem. I still occasionally get the error, but not nearly as often. I tried creating a plnkr to reproduce the problem with a minimal example but everything worked fine on plnkr. I'd rather not have to upload all my code. What I have now works well enough to move forward, so thank you for that. If I ever find the cause of this issue I'll be sure to post something here. |
|
ok, well glad it's working well enough for now. |
|
I'm seeing the multiple define issue in the web map and feature layer and legend example pages. |
|
at first I thought this was intermittent, but it does seem to happen pretty reliably the first time the page is run and less frequently on subsequent reloads of the page. |
|
I agree with your assessment. While I still get the error occasionally, it appears more frequently when I do a clear cache and refresh vs a standard refresh. And once the modules are loaded successfully, future refreshes work more reliably. I haven't figured out a good way to recover from this error state either. Force a page refresh? Try again? I'm open to suggestions, or willing to run some tests. |
|
I've never seen this issue in my parcel map example. I assumed that was b/c that example only has a single require([
'esri/map',
'esri/layers/ArcGISTiledMapServiceLayer', 'esri/layers/FeatureLayer',
'esri/symbols/SimpleFillSymbol', 'esri/symbols/SimpleLineSymbol', 'esri/Color',
'esri/tasks/query', 'esri/graphicsUtils'
], function(Map,
ArcGISTiledMapServiceLayer, FeatureLayer,
SimpleFillSymbol, SimpleLineSymbol, Color,
Query, graphicsUtils
) {
.... |
|
Also, I never see this issue in the test pages. When you run those pages locally with gulp they are pointing to the exact same module source for the directives, etc as the docs pages (where I'm seeing the problem). So, trying to isolate things that are in docs but not test pages:
It's looking like 3) could be the culprit in case of the docs pages, b/c I've reverted to a commit locally that does not include the syntax highlighting and I don't see any multiple define errors. However, I wonder if that is something that you would have in your app as well @niblicroad? Doesn't seem likely. Are there any other Angular modules that you are using? I wonder if it's a matter of the syntax highlighter or other modules using requireJS for their deps? |
|
I'm fairly certain it's something that I added with code syntax highlighting that is causing the issue w/ the docs in this repo, as I don't see the issue when I run the commit just before I added syntax highlighting, and then I do see it when I run the commit where I added it. However, I'm still interested to find out what the issue is for @niblicroad. |
|
I have two pages that occasionally throw the error. Neither use syntax highlighting. I am using angular (1.3.9), bootstrap3, jquery 1.11.2, angular-resource, angular-ui-router and oczlazyload. My newest working theory is that the timing / creation of the DOM is at fault. There are several modules all trying to inject / modify the DOM at page load and occasionally the call to require gets confused. The first page load takes longer (nothing cached), so the problem is more likely to occur. Possibly adding the syntax highlighting to your page affected the DOM creation in similar manner to what I'm seeing. Maybe if we could delay the call to require() until we are sure everything else is done processing the DOM? require (dom/ready!) then call require a second time to get the modules. Seams hacky but I may try it. I Googled the error message and several others suggested combining JQuery with Dojo could lead to the error. One suggested fix was to wrap JQuery in a module and use require could load it. I'm not sure that is a viable solution here, as we'd need to wrap everything we need (including angular) in a module, and require it. I haven't tried that. I have tried playing with the dojoConfig. Setting async, debug, and some other flags. Hosting the esri library myself instead of using the esri cdn. I have tried esri js v3.12 and v3.13. The compat versions. I built my own custom esri package to only including the modules I need. Nothing really solved the problem. Here are my require blocks. This is from my latest code that throws everything into one big require. I've tried this as an angular service, in a controller, and in a directive. It really doesn't seam to matter where I put it. I recently added the dojo/ready and dojo/domReady as a shot in the dark, but they didn't help. require([
'dojo/ready',
'dojo/_base/event',
'esri/config',
'esri/Color',
'esri/geometry/Extent',
'esri/geometry/Point',
'esri/graphic',
'esri/map',
'esri/SpatialReference',
'esri/layers/ArcGISDynamicMapServiceLayer',
'esri/layers/ArcGISTiledMapServiceLayer',
'esri/layers/FeatureLayer',
'esri/layers/GeoRSSLayer',
'esri/layers/GraphicsLayer',
'esri/layers/KMLLayer',
//'esri/layers/WMSLayer',
'esri/renderers/ClassBreaksRenderer',
'esri/renderers/SimpleRenderer',
'esri/symbols/PictureMarkerSymbol',
'esri/symbols/SimpleFillSymbol',
'esri/symbols/SimpleLineSymbol',
'esri/symbols/SimpleMarkerSymbol',
'esri/tasks/GeometryService',
'dojo/domReady!'
], function(dojoReady, dojoEvent, esriConfig, Color, Extent, Point, Graphic,
Map, SpatialReference,
ArcGISDynamicMapServiceLayer,
ArcGISTiledMapServiceLayer,
FeatureLayer, GeoRSSLayer, GraphicsLayer, KMLLayer, // WMSLayer,
ClassBreaksRenderer,
SimpleRenderer,
PictureMarkerSymbol,
SimpleFillSymbol, SimpleLineSymbol,
SimpleMarkerSymbol,
GeometryService) {
`});
require([
'esri/config',
'esri/Color',
'esri/geometry/Extent',
'esri/geometry/Point',
'esri/graphic',
'esri/map',
'esri/SpatialReference',
'esri/layers/GraphicsLayer',
'esri/renderers/SimpleRenderer',
'esri/symbols/SimpleFillSymbol',
'esri/symbols/SimpleLineSymbol',
'esri/symbols/SimpleMarkerSymbol'
], function (esriConfig, Color, Extent, Point, Graphic, Map, SpatialReference,
GraphicsLayer, SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol
){
}); |
|
Thanks @niblicroad for your detailed response. I'm working on a temp fix for the issue w/ hljs in the docs, and will try to see if I can come up with any commonalities with your conditions. |
|
I just put in a fix (43ad847) for the issue I was seeing in the docs. I noticed that if I removed the script tag for highlight.js from index.html that I no longer saw the multiple define errors. After much searching, it seemed that this was similar to the issues that others were having w/ jQuery or other libraries that can be optionally loaded as AMD (i.e. via a UMD block). A couple of responses to this GeoNet post seemed particularly relevant: https://geonet.esri.com/message/448542#448542 Both solutions worked for me, so it seems the solution is to make sure that the JSAPI is not loaded until the other libraries are. I ended up going w/ the I suspect that one of those will work for you as well, but if not, then you might try this if you haven't already (although I suspect it only works for jQuery): https://geonet.esri.com/message/346322#346322 I'll leave this issue open to see if any of those work for you. Thanks again for your patience and help with this issue. |
|
Thank you for the links. I have already added the defer attribute to my relevant script tags. I also include the js api after all the jQuery stuff. I'm still seeing the error, mostly on the initial page load. I will try removing some of my pages dependencies and see if I can isolate the problem as you did with highlight.js. Maybe reordering the include statements to more closely match your code will help. I'm currently waist deep in something else so it may be a few days before I can devote any more time to this issue. I am fairly certain the problem is not with the angular-esri-map code, but in how I'm using in it conjunction with other libraries. I will report back when I can. |
|
Darn, I was hoping that would work for your issue. I agree, I don't think this issue is specific to angular-esri-map, but more of a general issue of using the JSAPI w/ other libraries. However, I do think that using the JSAPI w/in the context of an Angular app increases the chances of bumping into this issue b/c it is common a common practice to include libraries like jQuery and other modules in an Angular app. I will leave this issue open for a while in the hopes that you have a chance to revisit it and come up w/ a solution for what you're seeing. Thanks again. |
|
I have run into some issues with mixing dojo and angular together in the same application before as well. I use this project in my application and one of the things I did as a added bonus was I created a different dojoLoader. This one makes it so you can ask for multiple dojo requires at the same time so that you don't have collision when making your require statements. (function (angular) {
'use strict';
angular.module('myNameSpace').factory('dojoLoader', function ($q) {
return {
getClass: function (name) {
var deferred = $q.defer();
if (angular.isString(name)) {
require([name], function (obj) {
deferred.resolve(obj);
});
}
else if (angular.isArray(name)) {
require(name, function (obj) {
deferred.resolve(arguments);
});
}
return deferred.promise;
}
}
});
})(angular);One other thing I found is that when I used libraries like lodash it has a auto detection method that figures out if AMD is enabled and it caused multiple require error. I hope this helps! |
|
@trkbrkr2000 this is great. It's been on my own mental TODO list for this repo to have esriLoader take an array of module names and return an array of modules. The fact that you've gone and done this means that others would benefit from it, so I have opened #45. Let me know if you are interested in making a pull request, otherwise I'll add something like the above code to esriLoader. |
|
@niblicroad - I'm closing this for now as I don't think it's specific to this project, but welcome your findings here if you come up with anything. |
|
Close away. Thank you again for the help. |
|
Hi, |
|
Hi @VuongTran21 this might look more like an occasional issue with JSAPI and other libraries (like jquery). Have you seen this comment above? We aren't familiar with Onemap and VtigerCRM, so it is difficult for me to address this. Are you making use of angular-esri-map? |
|
Because this is a common problem when integrating the JSAPI with other libraries, I don't think it's likely related to angular-esri-map. Have you tested to see if this issues happen w/o angular-esri-map? We will not be able to help troubleshoot w/o a link/fiddle that demonstrates the issue. |
|
Hi @jwasilgeo , @tomwayson thanks for your help, I tried many way include for suggestion but it still has error. It isn't angular-esri-map, I use it with VtigerCRM, I'm not sure because I'm a new with this field.This is onemap API and I'm using v3.10. |
|
@VuongTran21 in that case, I recommend some of the info and links included just above in the previous comments. It does sound like an integration issue between JSAPI and other libraries. Geonet and GIS StackExchange are good places to continue to look around. |
|
@jwasilgeo I saw some solution on those page which you suggest, but I still can not fix this problem. However thanks for your help a lot 👍 |
As my web app has grown I have started seeing "Error: multipleDefine { src: 'dojoLoader' ....." errors on page load. The particular module that fails changes, but the result is the same. I can't use that module where I need to because it fails to load.
I have tried using require['esri/xxx'] exclusively. I have tried using esriLoader('esri/xxx') exclusively. I have tried a combination of the two. Same result. I even tried running a script on page load, and throwing in every module I want to use. Still I occasionally get this 'dojoLoader' error, and my page fails due to missing dependencies. Even if I catch the error, I am not sure how to gracefully retry.
I do not think I am doing anything too complex. I am using the 'esriMap' directive and the esriFeatureLayer directive as is. I created two more directives to use the esri KMLLayer and esri GraphicsLayer modules. Basically I changed FeatureLayer to KMLLayer or GraphicLayer, and in my custom GraphicLayer I added some code to load my symbols and GIS data to display. I didn't add any additional code to the KMLLayer directive.
I am loading the esri js modules from "http://js.arcgis.com/". I tried v3.12 and v3.13. I think hosting the files myself as part of my web app helps, but I would rather avoid that if at all possible.
In total I'm calling require or esriLoader from 5 places (EsriMap, EsriFeatureLayer, EsriKmlLayer, EsriGraphicLayer). The errors do not always occur, but when they do my page is unusable. A page refresh helps. The problem appears to happen more frequently when I have the Chrome developer tools open.
Do you have any suggestions here? I need dojoLoader to load all my modules correctly when the page loads, every time. This map is a small part of a larger angular application so I would prefer to use the angular framework here and wrap the ESRI modules. I have found other examples online for doing so, but your package has been the easiest to integrate, and up until this dojoLoader problem been exactly what I need.
Thank you for any help.
The text was updated successfully, but these errors were encountered: