What's the correct way to load Marionette (v3) with RequireJS?

Question

I searched in vain all over Google on how to load Marionette v3-pre.4 - latest version until now (July 2016) - with RequireJS.

The bundled version of the library seems to be broken for RequireJS so I have to manually include "backbone.babysitter" and "backbone.radio" which are required for this version of Marionette.

According to: versioneye.com I need:

• "backbone.babysitter" 1.0.0-pre.1 and
• "backbone.radio" * 2.0.0-pre.1*

So I tried installing them with Bower:

bower install backbone.babysitter

It returned:

Unable to find a suitable version for backbone.babysitter, please choose one by typing one of the numbers below:
    1) backbone.babysitter#^0.1.12 which resolved to 0.1.12
    2) backbone.babysitter#1.0.0-pre.1 which resolved to 1.0.0-pre.1 and is required by marionette#3.0.0-pre.4

Prefix the choice with ! to persist it to bower.json

I selected the 2nd one like this:

? Answer !2

It returned:

bower resolution    Saved backbone.babysitter#1.0.0-pre.1 as resolution

I did exactly the same with backbone.radio:

bower install backbone.radio

Returned:

Unable to find a suitable version for backbone.radio, please choose one by typing one of the numbers below:
    1) backbone.radio#^1.0.5 which resolved to 1.0.5
    2) backbone.radio#2.0.0-pre.1 which resolved to 2.0.0-pre.1 and is required by marionette#3.0.0-pre.4

Prefix the choice with ! to persist it to bower.json

Selected:

? Answer !2

Returned:

bower resolution    Saved backbone.radio#2.0.0-pre.1 as resolution

Everything seemed to be ok, but when I checked the version for these two libraries in each's "bower.json" file, I found out that:

backbone.babysitter is at:

  "name": "backbone.babysitter",
  "version": "0.1.11"

and backbone.radio:

  "name": "backbone.radio",
  "version": "1.0.4"

Where did I go wrong?

This is my bower.json:

{
  "name": "Example App",
  "authors": "Consta Gorgan",
  "dependencies": {
    "backbone": "~1.2.3",
    "backbone.radio": "~2.0.0",
    "backbone.babysitter": "~1.0.0",
    "marionette": "~3.0.0",
    "requirejs": "~2.1.15",
    "requirejs-plugins": "~1.0.2"
  },
  "resolutions": {
    "backbone.radio": "2.0.0-pre.1",
    "backbone.babysitter": "1.0.0-pre.1"
  }
}

This is my shim file:

requirejs.config({
  paths: {
    jquery: '../bower_components/jquery/dist/jquery',
    underscore: '../bower_components/underscore/underscore',
    backbone: '../bower_components/backbone/backbone',
    'backbone.radio': '../bower_components/backbone.radio/build/backbone.radio',
    'backbone.babysitter': '../bower_components/backbone.babysitter/src/build/backbone.babysitter',
    marionette: '../bower_components/marionette/lib/core/backbone.marionette'
  },
  shim: {
    jquery: {
      exports: '$'
    },
    backbone: {
      deps: [
        'underscore',
        'jquery'
      ],
      exports: 'Backbone'
    },
    underscore: {
      exports: '_'
    },
    marionette: {
      deps: [ 'jquery', 'underscore', 'backbone', 'backbone.radio', 'backbone.babysitter' ],
      exports: 'Marionette'
    }
  }
})

And this is how I load modules with RequireJS in my app.js file:

define([
  'jquery',
  'underscore',
  'backbone',
  'marionette',
  'router'
], function ($, _, Backbone, Marionette, Router) {
  'use strict'

  var init = function () {
    Router.init()
  }

  return {
    init: init
  }
})

Aaand this is the error I keep getting in my browser:

And this one after a few more seconds:

Answer 1

Instead of ../bower_components/backbone.babysitter/src/build/backbone.babysitter use ../bower_components/backbone.babysitter/lib/backbone.babysitter