title: Backbone Marionette and RequireJS Modules Confusion – module seems to be undefined
body: <p>I just got started using Marionette and I'm reading and following along <a href="https://leanpub.com/marionette-gentle-introduction">Marionette - A Gentle Introduction</a> by <a href="https://github.com/davidsulc">David Sulc</a>. It's a really good read and it's easy to follow along building the sample application <em>Contact Manager</em> with the <a href="https://github.com/davidsulc/marionette-gentle-introduction">companion repository</a>.</p>
  
  <p>However, I had previously set up a project using RequireJS and wanted to translate and integrate the ideas and concepts of that book into this project. I haven't actually gotten that far and I think I might be a little bit confused about the use of Marionette Modules in combination with AMD modules which leads to <code>undefined</code> objects.</p>
  
  <p>To be more specific, let me list <code>app.js</code>, <code>listView.js</code> and <code>listController.js</code> which should be the RequireJS version of this <a href="https://github.com/davidsulc/marionette-gentle-introduction/commit/ada556f84092d45d3731f86c495a60e2d95af3c7">commit of the sample repo</a>.</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>/*global define*/
  define([
      'marionette'
  ], function ( Marionette ) {
      'use strict';
  
      var ContactManager = new Marionette.Application();
  
      ContactManager.addRegions({
          mainRegion : '#main-region'
      });
  
      ContactManager.on( 'initialize:after', function() {
  
          ContactManager.ContactsApp.List.Controller.listContacts();
      });
  
      return ContactManager;
  });
  </code></pre>
  
  <p><strong>listView.js</strong></p>
  
  <pre><code>/*global define*/
  define([
      'app',
      'marionette',
      'handlebars',
      'text!templates/contact.hbs'
  ], function ( ContactManager, Marionette, Handlebars, contactTemplate ) {
      'use strict';
  
      var List = ContactManager.module( 'ContactsApp.List' );
  
      List.Contact = Marionette.ItemView.extend({
  
          tagName: 'li',
          template : Handlebars.compile( contactTemplate ),
  
      });
  
      List.Contacts = Marionette.CollectionView.extend({
  
          tagName: 'ul',
          itemView: List.Contact
      });
  
      return List;
  });
  </code></pre>
  
  <p><strong>listController.js</strong></p>
  
  <pre><code>/*global define*/
  define([
      'app'
  ], function ( ContactManager ) {
      'use strict';
  
      var List = ContactManager.module( 'ContactsApp.List');
  
      List.Controller = {
  
          listContacts: function() {
  
              var contacts = ContactManager.request('contact:entities');
  
              var contactsListView = new ContactManager.ContactsApp.List.Contacts({
                  collection: contacts
              });
  
              ContactManager.mainRegion.show( contactsListView );
          }
      };
  
      return List.Controller;
  });
  </code></pre>
  
  <p>So, the error I get is <code>Uncaught TypeError: Cannot read property 'List' of undefined</code> in <code>app.js:15</code> which refers to this line:</p>
  
  <p><code>ContactManager.ContactsApp.List.Controller.listContacts();</code></p>
  
  <p>This means that the <code>ContactsApp</code> module is <code>undefined</code> and this is exactly what I don't understand.</p>
  
  <p>To my understanding I attach the <code>ContactsApp</code> module and the <code>List</code> sub-module to the <code>ContactManager</code> inside either <code>listView.js</code> or <code>listController.js</code> (whichever is called first) with the line:</p>
  
  <p><code>ContactManager.module( 'ContactsApp.List' );</code></p>
  
  <p>Shouldn't the <code>ContactsApp</code> be defined inside <code>app.js</code> then?</p>
  
  <p>This is the <strong>main.js</strong> file which includes the <code>require.config</code> and the entry point to the application:</p>
  
  <pre><code>require.config({
      baseUrl: './scripts',
      paths: {
          jquery     : '../bower_components/jquery/jquery',
          underscore : '../bower_components/underscore/underscore',
          backbone   : '../bower_components/backbone/backbone',
          marionette : '../bower_components/backbone.marionette/lib/backbone.marionette',
          bootstrap  : '../bower_components/sass-bootstrap/dist/js/bootstrap',
          text       : '../bower_components/requirejs-text/text',
          handlebars : '../bower_components/handlebars/handlebars',
          templates  : '../templates'
      },
  
      shim: {
          underscore : {
              exports : '_'
          },
          backbone : {
              deps : [ 'underscore', 'jquery' ],
              exports : 'Backbone'
          },
          marionette : {
              deps : [ 'backbone' ],
              exports : 'Backbone.Marionette'
          },
          bootstrap : {
              deps : [ 'jquery' ],
          },
          handlebars : {
              exports : 'Handlebars'
          }
      },
      deps : [ 'jquery', 'underscore' ]
  });
  
  require([
      'app',
      'bootstrap'
  ], function ( ContactManager ) {
      'use strict';
  
      ContactManager.start();
  });
  </code></pre>