Marionette CollectionView with requireJS: undefined is not a function

Question

I will explain my problem with an example. I can make this piece of code work without any problem (using MarionetteJS v1.6.2):

http://codepen.io/jackocnr/pen/tvqHa

But when I try to use it with requireJs and I put it on the initialize method of a Marionette Controller, I'm Getting the following error:

Uncaught TypeError: undefined is not a function backbone.marionette.js:2089

The Error comes when I define the collection view:

var userListView = new UserListView({
    collection: userList
});

I Can't figure out what is happening (this is the same code of the link above, but inside the controller initialize method)

define([
  'jquery',
  'underscore',
  'backbone',
  'marionette'
], function($,_,Backbone,Marionette){
    var Controller = Backbone.Marionette.Controller.extend({
       initialize: function(){
          var User = Backbone.Model.extend({});
          var UserList = Backbone.Collection.extend({
            model: User
          });
          var UserView = Backbone.Marionette.ItemView.extend({
            template: _.template($("#user-template").html())
          });
          var UserListView = Backbone.Marionette.CollectionView.extend({
            tagName: "ul",
            itemView: UserView,
            initialize: function() {
              this.listenTo(this.collection, "add", this.render);
            }
          });

          // instances
          var jack = new User({name: "Jack"});
          var userList = new UserList(jack);


          var userListView = new UserListView({
            collection: userList
          });

          // add to page
          $("#user-list").append(userListView.render().el);

          $("#add-user").click(function() {
            var andy = new User({name: "Andy"});
            userList.add(andy);
          });
    },
    });
    return Controller;
});

Answer 1

Seems to be working fine for me. I made a simple project here.

Answer 2

instead of using Backbone.Marionette in main.js shim : { use Marionette

marionette: {
    exports: 'Marionette',
    deps: ['backbone']
},

Thus while declaring any marionette inheritance juste use Marionette instead of Backbone.Marionette as such

var Controller = Marionette.Controller.extend

var UserView = Marionette.ItemView.extend

var UserListView = Marionette.CollectionView.extend

For some reason the newer version or Marionette.js behave this way. I guest it produce less code.

Answer 3

I have replaced the Marionette 1.6.2 version with the 1.5, and now it works as it does the version without requireJs. So I think it's a release bug or something like that.