Require.js + SignalR

Question

I have been working with Require.JS and SignalR over the past few days and I noticed that when I load my site sometimes the SignalR/Hubs seems to get loaded before jquery despite my require.js configuration appearing to be correct.

Here's my config:

require.config({
    paths: {
        jQuery: 'libs/jquery/jquery',
        Underscore: 'libs/underscore/underscore',
        Backbone: 'libs/backbone/backbone',
        Marionette: 'libs/backbone/backbone.marionette'
    }
});

require([
        'app',
        'order!libs/jquery/jquery-min',
        'order!libs/jQueryUI/jquery-ui-1.8.11.min',
        'order!libs/jqGrid/grid.locale-en',
        'order!libs/jqGrid/jquery.jqGrid.min',
        'order!libs/underscore/underscore-min',
        'order!libs/backbone/backbone-min',
        'order!Marionette',
        'order!libs/jquery.signalR-0.5.1',
        'order!noext!signalr/hubs'
    ], function (app) {
        app.initialize();        
    });

When this fails I get an error on line 16 of the hubs file. It says uncaught TypeError: Cannot read property 'signalR' of undefined.

Upgraded to V2 and modified my config.

var fRequire = require.config({
    paths: {
        jQuery: 'libs/jquery/jquery',
        Underscore: 'libs/underscore/underscore',
        Backbone: 'libs/backbone/backbone',
        Marionette: 'libs/backbone/backbone.marionette',
        sigr: 'libs/jquery.signalR-0.5.1'
    },
    shims: {        
        "libs/jquery.signalR-0.5.1": {
            deps: ["jQuery"]
        },
        "libs/jqGrid/jquery.jqGrid.min": {
            deps: ["jQuery"]
        },
        "libs/jquery/jquery-ui-1.8.19.min": {
            deps: ["jQuery"]
        },
        "libs/jqGrid/grid.locale-en": {
            deps: ["jQuery"]
        },
        "noext!signalr/hubs": {
            deps: ["sigr"]
        }
    }
});

fRequire([
    'app'
], function (app) {
    app.initialize();
});

Now require is looking in the wrong locations for jquery, underscore, etc...despite my telling it specifically where to look. Perhaps this has something to do with me following an old tutorial when I configured require using v1.

http://backbonetutorials.com/organizing-backbone-using-modules/

FINAL UPDATE:

Here is my working config. Hopefully it'll help any newbies like myself get passed this issue.

require.config({
    baseUrl: '/js',
    paths: {
        "jquery": 'libs/jquery/jquery-min',
        "underscore": 'libs/underscore/underscore-min',
        "backbone": 'libs/backbone/backbone-min',
        "marionette": 'libs/backbone/backbone.marionette',
        "sigr": 'libs/jquery.signalR-0.5.1'
    },
    shims: {
        "backbone": {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },
        "underscore": {
            deps: ["jquery"]
        },
        "marionette": {
            deps: ["backbone", "jquery"]
        },
        "sigr": {
            deps: ["jquery"]
        },
        "libs/jqGrid/jquery.jqGrid.min": {
            deps: ["jquery"]
        },
        "libs/jquery/jquery-ui-1.8.19.min": {
            deps: ["jquery"]
        },
        "libs/jqGrid/grid.locale-en": {
            deps: ["jquery"]
        },
        "noext!signalr/hubs": {
            deps: ["sigr"]
        }
    }
});

// for future ref, I loaded jquery here because app.js references sigr which requires it.
// without enabling it before the module is loaded sigr would complain jquery was not enabled.
require([
    'libs/domReady',
    'app',
    'jquery'
], function (domReady, app, $) {
    domReady(function () {
        app.initialize();
    });
});

It was mandatory that I load jquery in the function(domready, app, $). Failing to do so will result in signalr reporting that it cannot be found.

Marcelo De Zen Marcelo De Zen · Accepted Answer · 2012-07-13T22:13:02

If you're using requirejs 2.x you can use the "shims" config attribute. There you can specify the dependencies between files that are not AMD compliant, like jquery, jqueryui, etc..

Using your configuration as example:

require.config({ 
   paths: { 
      jQuery: 'libs/jquery/jquery', 
      Underscore: 'libs/underscore/underscore', 
      Backbone: 'libs/backbone/backbone', 
      Marionette: 'libs/backbone/backbone.marionette' 
   },
   // specify depedencies
   shim: {
      "libs/jquery.signalR-0.5.1" : {
           deps: ["jQuery"]
       },
       "libs/jqGrid/jquery.jqGrid.min" : {
           deps: ["jQuery"] 
       }
   }
});

Also, configure the dependencies in "shims" eliminates the use of the "order!" plugin.

Tip: Use "paths" to set a friendly name for apis that your system use, so when a new version of that api is released you can just change in "paths" and you're done.

Require.js + SignalR

2 Answers