CODEWITHSUNDEEP
backbone.jsecmascript-6marionette
Troy Cosentino
Troy Cosentino

Reputation: 4778

Getting Backbone.ChildViewContainer is not a constructor using browserify & es6

I am trying to set up a marionette project using browserify and es6. When creating a CollectionView I am getting the error Uncaught TypeError: Backbone.ChildViewContainer is not a constructor.

Am I missing loading something? Can't seem to find anything about this on the internet.

Here is my collection view:

import {ItemView, CollectionView} from 'backbone.marionette';
import navTemplate from '../templates/navigation.hbs';
import navItemTemplate from '../templates/_navItem.hbs';

var NavigationItem = ItemView.extend({
    template: navItemTemplate
});

var NavigationView = CollectionView.extend({
    template: navTemplate,

    childView: NavigationItem,

    childViewContainer: '.left-navigation',
});

export default NavigationView;

and my layout that is creating it

import {LayoutView} from 'backbone.marionette';
import layoutTemplate from './templates/layout.hbs';

import NavigationView from './Views/navigation';

export default class AppLayout extends LayoutView {
  constructor(options) {
    super(options);

    this.template = layoutTemplate;
  }

    regions() { 
        return {
            'navigation': '.left-aside'
        };
    }

    onRender() {
        console.log(this.getRegion('navigation'));
        this.getRegion('navigation').show(new NavigationView());
    }
}

I am also using a shim to use backbone.radio but that shouldn't impact this:

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['backbone.marionette', 'backbone.radio', 'underscore'], factory);
  } else if (typeof exports !== 'undefined') {
    module.exports = factory(require('backbone.marionette'), require('backbone.radio'), require('underscore'));
  } else {
    factory(root.Backbone.Marionette, root.Backbone.Radio, root._);
  }
}(this, function(Marionette, Radio, _) {
  'use strict';

  Marionette.Application.prototype._initChannel = function () {
    this.channelName = _.result(this, 'channelName') || 'global';
    this.channel = _.result(this, 'channel') || Radio.channel(this.channelName);
  };
}));

Edit: I have found that my compiled file has many copies of backbone so that might be the problem...

Upvotes: 1

Views: 999

Answers (2)

user888734
user888734

Reputation: 3897

I came across this problem with Webpack. I was able to work around it by specifying an alias in webpack.config.js

resolve: {
    extensions: ['', '.js', '.ts'],
    alias: {
        'backbone': 'backbone.marionette/node_modules/backbone'
    }
},

i.e. making sure all references to backbone use the one installed as a dependency of Marionette.

I've never used Browserify, but perhaps you can do something similar by installing aliasify and adding this to your package.json:

{
"aliasify": {
    "aliases": {
        "backbone": "backbone.marionette/node_modules/backbone"
    }
}

Upvotes: 2

ahwitz
ahwitz

Reputation: 23

Was getting this same error this morning when using an older JSPM config file pointing to Marionette 2.4.1 and Backbone 1.2.1, and Google linked me here... Updating to the more recent Marionette 2.4.5 and Backbone 1.3.2 releases seemed to fix things for me. What versions are you running?

Upvotes: 0

Related Questions