Trouble Combining Require.js And Backbone.js/underscore.js

I've read previous threads where other members have had identical error messages as me, but their accepted solution doesn't seem to help. Basically I get this in Chrome console whe

Solution 1:

This finally worked.

require.config({
    paths:{
        jquery:'jquery/jquery-min',
        underscore:'underscore/underscore-min',
        backbone:'backbone/backbone-min'
    },
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },
        waitSeconds: 15
    }
});

require(['day_view'], function (day_view) {
    function start() {
        day_view.show();
    }
    console.log(day_view); // Empty object here?
    return {
        start:start
    };
});

and

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) { ...

Solution 2:

You can use the shim above, or you can also use jrburke's** AMD compatible fork of Backbone/Underscore:

https://github.com/amdjs/backbone

https://github.com/amdjs/underscore

This allows you to simply do:

require.config({
    paths:{
        jquery:'jquery/jquery-min',
        underscore:'underscore/underscore-min',
        backbone:'backbone/backbone-min'
    }
});

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) { ...

Frankly, I found the fork easier/cleaner/more robust than using a shim.

** FYI jrburke is the creator of requirejs.

Solution 3:

PS Good news, Underscore 1.6.0 now supports requirejs define !!!

versions below this require shims, or requiring underscore.js then blindly hoping that the "_" global variable hasn;t been smashed (which to be fair is a fair bet)

simply load it in by

  requirejs.config({
    paths: {
        "underscore": "PATH/underscore-1.6.0.min",
    }
  });

No shimming required :)