Search code examples
javascriptbackbone.jsmarionettetypeerror

Backbone.Marionette.Controller throws "Uncaught TypeError: r.apply is not a function"


I want to run my Backbone.Marionette application, but when I try to do it, it breaks in this line of my code (controller.js):

var appController = new MyController();

Where MyController looks like:

var MyController = new Backbone.Marionette.Controller.extend({
    showItems: function(options) {
        this.collection = new MyCollection();
        var self = this;
        this.collection.fetch({
            success: function(options) {
                console.log("SUCCESS");
                var myView = new MyCollectionView({
                    collection: self.collection
                });
                options.region.show(myView);
            },
            error: function(options) {
                console.log("FAILED");
            }
        });
    }
});

and it shows the following error message:

Uncaught TypeError: r.apply is not a function

If I see the details of this error, it breaks in the else of this code from backbone-min.js (line 1884).

// The constructor function for the new subclass is either defined by you
// (the "constructor" property in your `extend` definition), or defaulted
// by us to simply call the parent constructor.
if (protoProps && _.has(protoProps, 'constructor')) {
  child = protoProps.constructor;
} else {
  child = function(){ return parent.apply(this, arguments); };
}

And then, looking at this, you can see that the error starts in my code, as I show in the following image.

I tried to change the line of my code to this:

var appController = MyController();

and it shows the same error, but the difference now is that it only breaks in the backbone.js code (same line), which is really weird.


Solution

  • Thanks Emile, I followed your instructions but now throws the following error in the backbone.marionette.js code:

    backbone.marionette.js:19 
    Uncaught TypeError: Cannot use 'in' operator to search for 'default' in undefined
    

    The error is easy to spot since it points to the following line in the Marionette code:

    Radio = 'default' in Radio ? Radio['default'] : Radio;
    

    Which means Radio is undefined.

    From Marionette download page:

    Backbone.Radio is required for Marionette.

    Take time to read the documentation on how to get started for each lib you want to use. It will really save you time.