Require JS with Node and jQuery

Question

I am using r.js to attempt to compile my require JS application by running r.js on my main application file:

$ r.js js/bootstrap.js

However, I am getting errors with jQuery:

Error: Evaluating www/js/lib/jquery_plugins/slider.js as module "slider" failed with error: ReferenceError: jQuery is not defined

So I know this is because of the reference to jQuery in my slider plugin, but I thought this could be resolved by adding jQuery as a shim in my bootstrap.js file, that file looks like this:

// Require JS bootstrap file
require.config({

    paths: {
        jquery: 'lib/jquery',
        backbone: 'lib/backbone',
        backboneLocalStorage: 'lib/backbone.localStorage',
        underscore: 'lib/underscore',
        util: 'lib/util',
        config: 'config',
        lang: 'lang',
        hammer: 'lib/hammer',
        moment: 'lib/jquery_plugins/moment',
        slider: 'lib/jquery_plugins/slider'
    },
    shim: {
        jquery: {
            exports: '$'
        },
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ['underscore'],
            exports: 'Backbone'
        },
        hammer: {
            deps: ['jquery'],
            exports: 'Hammer'
        }
    }
});

// load the app
require(['app'], function(App) {
    if(navigator.userAgent.indexOf("Chrome")) {
        // then I am running on my local host on chrome
        // so force device ready
        onDeviceReady();
    }
    document.addEventListener('deviceready', onDeviceReady, false);

    function onDeviceReady() {
        App.initialize();
    }
});

I tried changing exports to jQuery instead of $ but that doesn't seem to change anything.

Answer 1

Under shim, you haven't specified the dependencies for slider & moment.

Please check what slider & moment exports :)

shim: {
        jquery: {
            exports: '$'
        },
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ['underscore'],
            exports: 'Backbone'
        },
        hammer: {
            deps: ['jquery'],
            exports: 'Hammer'
        },
        slider: {
            deps: ['jquery'],
            exports: 'slider'
        },
        moment: {
            deps: ['jquery'],
            exports: 'moment'
        }
    }