Backbone is not defined

Question

I'm using backbone.js with require.js. I tried one tutorial and this is my index.html :

<script src="app/script/libs/require/require.js" data-main="app/script/main" type="text/javascript"></script>
<script src="app/script/router.js" type="text/javascript"></script>


<script type='text/javascript'>
  $(document).ready(function()
  {
    var appRouter = new AppRouter(); // Router initialization
    Backbone.history.start(); // Backbone start
  });
</script>

And this is main.js :

require.config({
  urlArgs: "bust=" + (new Date()).getTime(),
  paths: {
    jquery: 'libs/jquery/jquery',
    underscore: 'libs/underscore/underscore',
    backbone: 'libs/backbone/backbone'
  }
});
require(["jquery", "underscore", "backbone"],
  function ($, _, Backbone) {
    console.log("Test output");
    console.log("$: " + typeof $);
    console.log("_: " + typeof _);
    console.log("Backbone: " + typeof Backbone);
  }
);

And this is my console:

ReferenceError: Backbone is not defined
[Break On This Error]   
$(document).ready(function()


ReferenceError: $ is not defined
[Break On This Error]   
$(document).ready(function()

Test output
$: function
_: function
Backbone: object

Require.js is working, but the backbone and jquery is undefined, I don't know what's wrong with them.

This is the structure of my file :

Any idea please. Thanks

Answer 1

You should also declare your libs in shim config

require.config({
  urlArgs: "bust=" + (new Date()).getTime(),
  paths: {
    jquery: 'libs/jquery/jquery',
    underscore: 'libs/underscore/underscore',
    backbone: 'libs/backbone/backbone'
  },
  shim: {
        'backbone': {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },
        'underscore': {
            exports: "_"
        }
    }
});
require(["jquery", "underscore", "backbone"],
  function ($, _, Backbone) {
    console.log("Test output");
    console.log("$: " + typeof $);
    console.log("_: " + typeof _);
    console.log("Backbone: " + typeof Backbone);
  }
);

Answer 2

With your setup you can use Backbone only if it was injected as a dependency in a requireJS module, it is not available in the global name space. Also requiring something that you need in most of every module like jquery, Backbone or underscore seems not the best idea. Just load them as script tag before your requireJS main file and everything is fine.

If you want to keep the shim solution you have to start your app inside a the main.js file

require.config({
  urlArgs: "bust=" + (new Date()).getTime(),
  paths: {
    jquery: 'libs/jquery/jquery',
    underscore: 'libs/underscore/underscore',
    backbone: 'libs/backbone/backbone'
  }
});

require(["jquery", "underscore", "backbone"],
  function ($, _, Backbone) {
    console.log("Test output");
    console.log("$: " + typeof $);
    console.log("_: " + typeof _);
    console.log("Backbone: " + typeof Backbone);

    $(document).ready(function() {
      var appRouter = new AppRouter(); // Router initialization
      Backbone.history.start(); // Backbone start
    });
  }
);