Durandal - Failed to load routed module Details: undefined is not a function - requirejs

Question

What does the error "Failed to load routed module (edit/user/index). Details: undefined is not a function" mean?
I get this error intermittetly and my stack trace looks like this:
logError system.js?bust=1398976887311:92
(anonymous function) router.js?bust=1398976887311:362
l jquery.min.js:6
c.fireWith jquery.min.js:6
(anonymous function) jquery.min.js:6
l jquery.min.js:6
c.fireWith jquery.min.js:6
i.(anonymous function) jquery.min.js:6
(anonymous function) system.js?bust=1398976887311:260
(anonymous function) require.js:129
(anonymous function) require.js:1154
each require.js:57
Module.emit require.js:1153
(anonymous function) require.js:529
each require.js:57
onError require.js:522
Module.check require.js:893
(anonymous function) require.js:1111
(anonymous function) require.js:129
(anonymous function) require.js:1154
each require.js:57
Module.emit require.js:1153
Module.check require.js:924
Module.enable require.js:1141
Module.init require.js:778
callGetModule require.js:1168
context.completeLoad require.js:1530
context.onScriptLoad
I have a module global that looks like this:
define(['jquery', 'knockout', 'plugins/ajax'], function ($, ko,ajax) {
'use strict';
var obj = {};
obj.loading = ko.observable(false);
obj.activate = function () {
obj.loading.subscribe(function (newValue) {
if (newValue) {
$.blockUI({
css: {
border: 'none',
padding: '15px',
backgroundColor: '#333',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: 0.9,
color: '#fff',
fontSize: '26px',
fontFamily: "'Helvetica Neue', Helvetica"
},
overlayCSS: {
opacity: 0.2,
},
message: '<span>Please wait...</span>',
fadeIn: 0
});
}
else
$.unblockUI();
});
obj.promise = $.when(
ajax.wrap('Durandal/GetUnitModel', { Id: '1' }, function (response) {
ajax.updateModel(obj, 'unitModel', response.Model);
}),
ajax.wrap('Durandal/GetUserModel', { Id: '1' }, function (response) {
ajax.updateModel(obj, 'userModel', response.Model);
}),
ajax.wrap('Durandal/GetOfficeModels', { Id: '1' }, function (response) {
ajax.updateModel(obj, 'Offices', response.Model);
}),
ajax.wrap('Durandal/GetUserGroupModels', { Id: '1' }, function (response) {
ajax.updateModel(obj, 'UserGroups', response.Model);
})
);
return obj.promise;
};
return obj;
});
My edit user module that intermittently doesn't load (half the time it works fine) is:
define(['durandal/global','plugins/router', 'plugins/http', 'durandal/app', 'knockout', 'plugins/ajax', 'plugins/dialog', 'plugins/permissions', 'plugins/utility'], function (global,router, http, app, ko, ajax, dialog, permissions,utility) {
var vm = {};
vm.permissions = permissions;
vm.utility = utility;
vm.global = global;
vm.AddOffices = ko.computed(function () {
var ao = [];
$.each(global.Offices(), function (i, v) {
if (v.Name() != 'N/A' && v.Name() != 'Office of Afghanistan and Pakistan Affairs')
ao.push(v);
});
return ao;
});
vm.getUser = function (personId) {
if (personId == '0') {
return $.when(global.promise).then(function () {
ajax.updateModel(vm, 'newPersonRecord', {
"Email": ko.observable(""),
"FirstName": ko.observable(""),
"LastName": ko.observable(""),
"UserGroup": { Id: ko.observable("3"), Name: ko.observable("Viewer") },
"UserGroupId": ko.observable("3"),
"Office": { Id: ko.observable(global.Offices()[0].Id()), Name: ko.observable(global.Offices()[0].Name()) },
"OfficeId": ko.observable(global.Offices()[0].Id()),
"CotrExpirationDate": ko.observable(""),
"UserExpirationDate": ko.observable(Date.today().add(6).months().add(-1).days().toString('M/d/yyyy')),
"Id": ko.observable("0"),
"UnitId": global.userModel.UnitId(),
"UnitName": global.userModel.UnitName(),
"PasswordResetDate": ko.observable(""),
"Name": ko.observable(""),
"UserGroupName": ko.observable(""),
"OfficeName": ko.observable("")
});
});
}
else
return ajax.wrap('UserAdmin/GetUser', { PersonId: personId }, function (response) {
ajax.updateModel(vm, 'newPersonRecord', response.Model);
});
};
vm.activate = function (personId) {
return vm.getUser(personId);
};
vm.save = function () {
if ($("[name='validationError']:visible").length > 0) {
alert('Please correct all errors before continuing.');
return;
}
else {
if (vm.newPersonRecord.OfficeId() != '40')
ajax.wrap("UserAdmin/Update", vm.newPersonRecord, function (response) { if (!response.Success) alert(response.Message); else alert('User record saved.'); vm.back();});
else
ajax.wrap("UserAdmin/UpdatePartner", vm.newPersonRecord, function (response) { if (!response.Success) alert(response.Message); else alert('User recrord saved.'); vm.back(); });
}
};
vm.back = function () {
router.navigateBack();
};
vm.chars = function (str, numChars) {
if (str.length > numChars)
return false;
return true;
};
vm.validEmail = function () {
if (vm.newPersonRecord.Name().indexOf("#") == -1)
return false;
if (vm.newPersonRecord.Name().indexOf("’") != -1)
return false;
if (vm.newPersonRecord.Name().indexOf(",") != -1)
return false;
if (vm.newPersonRecord.Name().length < 4)
return false;
return true;
};
vm.emailExists = function () {
var emailExists = false;
$.each(viewModel.People(), function (index, value) {
if (value.Name() == newPersonRecord.Name())
emailExists = true;
});
return emailExists;
};
vm.cacheViews = false;
return vm;
});
My shells.js module looks like this:
define(['plugins/router', 'durandal/app', 'plugins/ajax', 'durandal/global', 'durandal/activator'], function (router, app, ajax, global, activator) {
var vm = {};
vm.global = activator.create();
//call this to refresh menu items
vm.rebuildRouter = function () {
return ajax.wrap('Durandal/GetMenuItems', { menuName:'viewmodels/shell.js' }, function (response) {
vm.router.deactivate();
vm.router.reset();
vm.router.routes = [];
vm.router.map(response.Model).buildNavigationModel();
vm.router.activate();
});
/* { route: 'Map*details', title: 'Map', moduleId: 'map/index', nav: true, hash: '#Map' },*/
};
vm.activate = function () {
var promise = vm.global.activateItem(global);
return $.when(promise, vm.rebuildRouter());
}
vm.refreshUnit = function () {
ajax.wrap('PostLogin/DurandalSwitchUnit', { unitId: vm.global().userModel.UnitId() }, function (response) { $.when(global.activate(),vm.activate()).then(function () { router.navigate();}); });
};
vm.router = router;
return vm;
});
Any help debugging this would be greatly appreciated. Has anyone else run into such an error, what did it mean? It would help to even know roughly where to look, why does Durandal throw this error, it says something is 'undefined' but what is it looking for that is undefined in this case?

Answer 1

Assuming you're using Durandal 2.x, change the following line in your module global:
define(['jquery', 'knockout', 'plugins/ajax'], function ($, ko,ajax) {...
to this:
define(['knockout', 'plugins/ajax'], function (ko,ajax) {...
See if that that solves the problem.

Answer 2

This error message led me down hours of wild goose chases.
Eventually I found and fixed an error in my code where I had attempted to use the underscore library and this is what was failing.
If you get this error message, anything could be wrong anywhere in your module. You probably put a symbol like _ or $ somewhere in your code and it isn't defined.