Cannot get requirejs to include Backbonejs

Question

I am trying to modularize my Backbone app through Requirejs, but I cannot seem to get Requirejs to include Backbone. Here is my main.js that gets included from the index page:

require.config({
    baseUrl: '/static/js/',
    paths: {
        jquery: 'libs/jquery/jquery-min',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-min',
        text: 'libs/require/text',
    },
});

require(['/static/js/views/app.js'], function(AppView) {
    var appView = new AppView;
});

Here is my app.js that gets included from the above file:

define([
    'jquery',
    'underscore',
    'backbone',
], function($, _, Backbone) {
  console.log($);
  console.log(_);
  console.log("inside of the app js file");
    var AppView = Backbone.View.extend({

        initialize: function() {
            console.log("inside of appview initialize");
        },

    });
});

The following information gets printed out in my Google Chrome console:

function (a,b){return new e.fn.init(a,b,h)}
app.js:7undefined
app.js:8inside of the app js file
app.js:9Uncaught TypeError: Cannot read property 'View' of undefined

The definition for $ works, but the definitions for _ and Backbone do not work. They come up as undefined. Any idea why this is happening?

score 5 · Accepted Answer · answered Jun 25 '12 at 05:52

I recommend you use the version of requireJS that has jQuery bundled. It will save you much setup pain. You can read the details here: http://requirejs.org/docs/jquery.html and download the files here: https://github.com/jrburke/require-jquery

In their own words:

With RequireJS, scripts can load in a different order than the order they are specified. This can cause problems for jQuery plugins that assume jQuery is already loaded. Using the combined RequireJS + jQUery file makes sure jQuery is in the page before any jQuery plugins load.

This should take care of loading jQuery properly with requireJS:

<script data-main="js/main" src="js/require-jquery.js"></script>

Main.js

A couple of notes here:

No need to re-define the path to jquery since that's already taken care of
You still have to indicate jquery as a required module
(I had to update the paths to have them work in my system)

Code:

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

require(['jquery', 'app'], function($, AppView) {
    console.log("done w/ requires");
    console.log($)
    console.log(AppView)
    var appView = new AppView;
});

app.js

A couple notes:

You can only retrieve the JS files after loading them in the callback if they have been defined as modules. So function($, _, Backbone) will fail for you.
You must return your object so that it can be used in the main.js callback (return AppView)

Code:

define(
    [
    'jquery',
    'underscore',
    'backbone',
    ],
    function() {
        console.log($);
        console.log(_);
        console.log(Backbone);
        console.log("inside of the app js file");
        return AppView = Backbone.View.extend({
            initialize: function() {
            console.log("inside of appview initialize");
        },
    });
});

Console

With that code in place, this is the console output:

function ( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
    } [app.js:8]

function (a){return new m(a)} [app.js:9]

Object [app.js:10]

inside of the app js file [app.js:11]

done w/ requires main.js:21

function ( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
} [main.js:22]

function (){a.apply(this,arguments)} [main.js:23]

inside of appview initialize [app.js:15]

score 5 · Answer 2 · answered Jun 25 '12 at 18:30

I would shy away from using forked versions of backbone and underscore. A "shim" configuration option has been added to requirejs to handle 3rd party libraries that don't natively support AMD. This makes updating to the latest versions of the libraries much easier.

http://requirejs.org/docs/api.html#config-shim

Here is an example:

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

score 0 · Answer 3 · edited May 23 '17 at 10:27

0

You may not have the correct reference backbone and _,may be this can help you：

Loading Backbone and Underscore using RequireJS

more: http://requirejs.org/docs/api.html#config-shim

edited May 23 '17 at 10:27

Community

1
1

answered Jun 25 '12 at 05:43

Justin wong

638
6
15

Cannot get requirejs to include Backbonejs

3 Answers3

Linked