TypeError: undefined is not an object (evaluating 'Marionette.LayoutView.extend')

Question

Learning Marionette and trying to create regions using the Marionette LayoutView. And I got the error message as described in the question title. Went over the codes many times but just could not see where the problem is. Hopefully someone can tell me. Thanks. Apparently the problem line is Marionette.LayoutView is undefined, and I don't know why:

var AppLayoutView = Marionette.LayoutView.extend(

var Marionette = require('backbone.marionette'),
    Controller = require('./controller'),
    Router = require('./router'),
    UserModel = require('./models/user'),
    UsersCollection = require('./collections/users');    

module.exports = App = function App() {};

    App.prototype.start = function(){
        App.core = new Marionette.Application();

        App.core.on("initialize:before", function (options) {
            //App.core.vent.trigger('app:log', 'App: Initializing');

            App.views = {};
            App.data = {};

            //define the App regions
            var AppLayoutView = Marionette.LayoutView.extend({ 
                template: "#app-container",

                regions: {
                  headerRegion: "#header-region",
                  mainRegion: "#main-region",
                  drawerRegion: "#drawer-region",   
                  dialog: "#dialog-region"      
                }
            });

            App.mainlayout = new AppLayoutView();
            App.mainlayout.render();

            var DashLayoutView = Marionette.LayoutView.extend({ 
              template: "#dashboard-template",

              regions: {
                dashHeaderRegion: "#dbheader-region",
                dashMainRegion: "#dbmain-region",
              }
            });

            App.dashlayout = new DashLayoutView();
            App.dashlayout.render();

            // load up some initial data:
            var users = new UsersCollection();
            users.fetch({
                success: function() {
                    App.data.users = users;
                    App.core.vent.trigger('app:start');
                }
            });
        });

        App.core.vent.bind('app:start', function(options){
            //App.core.vent.trigger('app:log', 'App: Starting');
            if (Backbone.history) {
                App.controller = new Controller();
                App.router = new Router({ controller: App.controller });
                //App.core.vent.trigger('app:log', 'App: Backbone.history starting');
                Backbone.history.start();
            }

            //new up and views and render for base app here...
            //App.core.vent.trigger('app:log', 'App: Done starting and running!');
        });

        App.core.vent.bind('app:log', function(msg) {
            console.log(msg);
        });

        App.core.start();
    };

Answer 1

I admit that the question I posted was ambiguous. My apologies. Part of my learning process. Anyhow for the record, I have refactored my codes as below that is now working for me.

var Marionette = require('backbone.marionette'),
    Controller = require('./controller'),
    Router = require('./router');


App = new Marionette.Application();

App.on("before:start", function(){

    App.addRegions({
        headerRegion: "#header-region",
        mainHeaderRegion: "#content-header",    
        mainRegion: "#main-region",
        drawerRegion: "#drawer-region",
        dialog: "#dialog-region"
    });

});


App.on("start", function(){

    if (Backbone.history) {
        App.controller = new Controller();
        App.router= new Router({ controller: App.controller });

        //App.core.vent.trigger('app:log', 'App: Backbone.history starting');
        Backbone.history.start();
    }

});

App.vent.bind('app:log', function(msg) {
    console.log(msg);
});

App.start();