"TypeError: undefined is not a function, Durandal SPA

Question

I am trying to create simple Durandal SPA, however I am having the error below, and after hours, cant find what the issue is, my only though its maybe the data service define on the top of speakers.js, but not sure if my assumption is ok.

"TypeError: undefined is not a function
    at refresh (http://localhost:38945/App/speakers.js:21:16)
    at Object.activate (http://localhost:38945/App/speakers.js:17:20)
    at tryActivate (http://localhost:38945/Scripts/durandal/composition.js:112:44)
    at Object.composition.bindAndShow (http://localhost:38945/Scripts/durandal/composition.js:491:13)
    at Object.<anonymous> (http://localhost:38945/Scripts/durandal/composition.js:602:29)
    at Object.<anonymous> (http://localhost:38945/scripts/vendor?v=CoGrntPfi-B6C9wW1BBGgsUzERM99npj7WHKHsHaK8U1:1:37083)
    at l (http://localhost:38945/scripts/vendor?v=CoGrntPfi-B6C9wW1BBGgsUzERM99npj7WHKHsHaK8U1:1:35715)
    at Object.s.fireWith [as resolveWith] (http://localhost:38945/scripts/vendor?v=CoGrntPfi-B6C9wW1BBGgsUzERM99npj7WHKHsHaK8U1:1:36527)
    at Object.t.(anonymous function) [as resolve] (http://localhost:38945/scripts/vendor?v=CoGrntPfi-B6C9wW1BBGgsUzERM99npj7WHKHsHaK8U1:1:37507)
    at Object.<anonymous> (http://localhost:38945/Scripts/durandal/viewEngine.js:167:25)"

dataservice.js

define(['logger'], ['durandal/system'],  function (logger, system) {

    var getSpeakerPartials = function (speakerObservable) {
        // reset the obersvable
        speakerObservable([]);

        //set ajax call
        var option = {
            url: '/api/speakers',
            type: 'GET',
            datatype: 'json'
        };

        //make call
        return $.ajax(options)
            .then(querySucceeded)
            .fail(queryFailed);

        function querySucceeded(data) {
            var speakers = [];
            data.sort(sortSpeakers);
            data.forEach(function (item){
                var s = new model.SpeakerPartial(item);
                speaker.push(s);
            });
            speakerObservable(speakers);
            log('Retrieved speakes from dremote data source', speakers, true);
        }

        function queryFailed(jqXHR, textStatus) {
            var msg = 'Error getting data. ' + textStatus;
            logger.log(msg,
                jqXHR,
                system.getModuleId(dataservice),
                true);
        }

        function sortSpeakers(s1, s2) {
            return (s1.firstName + s1.lastName > s2.firstName + s2.lastName) ? 1 : -1;
        }
    };

    var dataservice = {
        getSpeakerPartials: getSpeakerPartials
    };
    return dataservice;

    function log(msg, data, showToast) {
        logger.log(msg, data, system.getModuleId(dataservice), showToast);
    }
});

speakers.js

define(['dataservice'], function (ds) {
    debugger;
    var speakers = ko.observableArray();
    var initialized = false;
        var vm = {
            activate: activate,
            speakers: speakers,
            title: 'Speakers',
            refresh: refresh
        };

        return vm;

        function activate() {
            if (initialized) { return; }
            initialized = true;
            return refresh();
        }

        function refresh(){
            ds.getSpeakersPartials(speakers);
        }
    }
);

and my vs studio structure if that helps: http://screencast.com/t/uvqYqNrIz

Answer 1

Can you try with

  define(['logger', 'durandal/system'],  function (logger, system) {

instead of

  define(['logger'], ['durandal/system'],  function (logger, system) {

Answer 2

If you will see properly the function name is getSpeakerPartials and you are calling it as ds.getSpeakersPartials(). I think that is the problem.

If you see the error properly it says undefined is not a function on the line 21 in speakers.js. And you 21nd line is ds.getSpeakersPartials().