Use backbone 1.2.0

[johannes-photobox]

At the moment when you install backbone and marionette without a version number you will install marionette 2.4.1 and backbone 1.2.0. Since marionette uses 1.1.2, you will have two versions of backbone in use within you application which leads to nasty errors, for example if you want to assign jQuery to backbone Backbone.$ = require('jquery') then Marionette can't access jQuery (for Deferred etc.) since it's accessing it's own backbone dependency.

[rwhitmire]

+1

Marionette is currently almost impossible to use with webpack or browserify. Loading Marionette with Webpack bundles 3 different versions of Backbone and 2 versions of Underscore.

backbone.babysitter:

"dependencies": {
  "backbone": ">=0.9.9 <=1.1.2",
  "underscore": ">=1.4.0 <=1.6.0"
}

backbone.wreqr:

"dependencies": {
  "backbone": ">=0.9.9 <=1.1.2",
  "underscore": ">=1.3.3 <=1.6.0"
}

backbone.marionette:

"dependencies": {
  "backbone.babysitter": "^0.1.0",
  "backbone.wreqr": "^1.0.0",
  "backbone": "1.0.0 - 1.1.2",
  "underscore": "1.4.4 - 1.6.0"
}

[ahumphreys87]

Will be fixed with: #2561

[JSteunou]

Would be awesome!

[paulfalgout]

@rwhitmire the dependencies were set this way because neither backbone or underscore follow semver, but Marionette does. So we have to manually updated the dependencies for versions when we know there are no breaking changes.

[rwhitmire]

Make sense. I worked around the issue by loading the libraries directly into the browser rather than loading through webpack. Thanks for clarifying!

[sehmaschine]

any workaround in the meantime? because the mentioned solution doesn't seem to work (well, at least with my setup) ...

I've installed (via npm):

• backbone 1.1.2
• backbone.marionette 2.4.1
• jquery 2.1.4

For testing purposes, my main.js just contains:

var $ = require('jquery');
var Backbone = require('backbone');
var Marionette = require('backbone.marionette');
Backbone.$ = $;
Marionette.$ = Backbone.$;

Still, I do see "Uncaught TypeError: Cannot read property 'Deferred' of undefined" referring to Marionette.Deferred = Backbone.$.Deferred;.

Any hints/ideas?

[jridgewell]

@sehmaschine: You're requiring Marionette before you set Backbone.$. Instead:

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
var Marionette = require('backbone.marionette');

[sehmaschine]

@jridgewell that doesn't make a difference (already tried all kinds of variations).

[jgerigmeyer]

FWIW, you can workaround this issue using Webpack by specifying an alias for backbone and underscore, to force Webpack to use the latest versions only:

package.json:

"backbone": "1.2.0",
"backbone.marionette": "2.4.1",
"underscore": "1.8.3"

webpack.config.js

alias: {
  // Force all modules to use versions of backbone and underscore defined
  // in package.json to prevent duplicate dependencies
  'backbone': path.join(__dirname, 'node_modules', 'backbone', 'backbone.js'),
  'underscore': path.join(__dirname, 'node_modules', 'underscore', 'underscore.js')
}

[johannes-photobox]

@jgerigmeyer but this might break some functionality of Marionette since it doesn't support Backbone 1.2.0 yet. I think the best workaround for now is:

"dependencies": {
  "backbone": "~1.1.2",
  "backbone.marionette": "^2.4.1",
}

;) Until the next update at least...

[stevewillard]

Just want to confirm that things seem broken when you use Backbone 1.2.0 (at least, when using Webpack).

this.channel = _.result(this, 'channel') || Backbone.Wreqr.radio.channel(this.channelName);

It says that it can't read "radio" of undefined -- looks like Wreqr is not being attached to the Backbone object. I can provide more details if it helps anyone.

[paulfalgout]

@stevewillard I suspect this is due to wreqr also having it's dependencies set to a lower version. https://github.com/marionettejs/backbone.wreqr/blob/master/package.json#L42

I'm not a webpack user, but it seems like the alias listed above would solve that issue.

[jgerigmeyer]

I understand it's not officially supported, but FWIW I've been using Backbone 1.2.0 with Underscore 1.8.3 and Marionette 2.4.1 without trouble so far.

[stevewillard]

@paulfalgout Unfortunately, I tried that and it doesn't seem to work.

I think I'm done messing with configuration files for now... I'll just wait for Marionette to bump the Backbone dependency and hopefully things will sort out.

[realalexhomer]

+1

I cannot figure out a way currently to use Browserify with Marionette.

I am using Backbone 1.1.2 and Marionette 2.4.1 with the latest version of Browserify to set up a new project and this issue (Cannot read property 'Deferred' of undefined) is essentially stopping me from getting anywhere. I've tried everything suggested in this and other threads I've seen to no avail.

Can anyone think of a good workaround other than loading the files directly into the browser?