Trouble combining Require.js and Backbone.js/Underscore.js
backbone.js, html, javascript, requirejs, underscore.js
Solution
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) { ...
Problem
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 when I try to load index.html: ``` Uncaught Error: Module name "underscore" has not been loaded yet for context: _. Use require([]) ``` A couple of seconds later this shows up: ``` Uncaught Error: Load timeout for modules: underscore,backbone ``` Chrome network tools doesn't show any anomalies everything up until day_view.js is loaded fine (200 OK). File structure index.html ``` ... <script> var require = { deps: ["jquery/jquery-min", "underscore/underscore-min", "backbone/backbone-min"] }; </script> <script data-main="scripts/main" src="scripts/require.js"></script> ... ``` main.js ``` require.config({ baseUrl: 'scripts', paths:{ jquery:'jquery/jquery-min', underscore:'underscore/underscore-min', backbone:'backbone/backbone-min' }, shim: { underscore: { exports: '_' }, backbone: { deps: ["underscore/underscore-min", "jquery/jquery-min"], exports: "Backbone" } }, waitSeconds: 200 }); require(['day_view'], function (day_view) { function start() { day_view.render(); } return { start:start }; }); ``` day_view.js ``` define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) { function render() { ... } ... ```