How use require.js to load jQuery with noConflict

Question

I am trying to load jquery in noConflict mode by using require

require.config({
    paths: {
        'jquery': 'libs/jquery-req',
        underscore: 'libs/underscore',
        backbone: 'libs/backbone'
    },
    shim: {
        jquery: {
            init: function() {
                console.log('jq init');
                var jq = this.jQuery.noConflict(true);
                jq.support.cors = true;

                return jq;
            },
            exports: '$'
        },
        backbone: {
            deps: ['underscore', 'jquery'],
            init: function() {
                console.log('b init');
            },
            exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        }
    }
});

and use it like that:

define([
    'jquery',
    'underscore',
    'backbone'
], function(jq, _, Backbone) {
    console.log(jq);
    var initialize = function() {
//        Router.initialize();
    };

    return {
        initialize: initialize
    };
});

unfortunately it seems shim.jquery.init function is never called. Can someone try to help me understand why? What is strange when I rename jquery -> jquery-reg then it seems to work, but it requires to change dependency defined in every files.

Solution

Create the following noconflict.js module:

define(["jquery"], function($) {
  //drop the `true` if you want jQuery (but not $) to remain global
  return $.noConflict(true); 
});

Then, in your require.config add:

map: {
  "*": {
    "jquery": "noconflict"
  },
  "noconflict": {
    "jquery": "jquery"
  }
}

The noconflict version of jQuery will be handed to all modules (except noconflict). Get rid of the jQuery shim.

Please note that going the path of keeping jQuery out of the global namespace will prevent you from using any jQuery plugins that are non-AMD without modifying those plugins to be AMD modules. Shim doesn't do anything magical to take advantage of this setup. The same goes for any non-AMD module you might want to shim that depends on something you've made "pure" AMD.

Comments

[explunit]

I think $ will still be in the global scope with your approach (even if you don't name the parameter $), which is what mrok was trying to avoid

[Chris Visser]

It isn't. Tested it to be sure: ''Uncaught ReferenceError: $ is not defined

[mrok]

I do not think there is a way to load jquery without adding $ to global scope. My case is that I have already loaded jquery1.4.2 and I would like to use latest version (loaded by require) in no conflict mode. Chris I tried your code and there is $ loaded into global scope - so I have no idea how did you get ' $ is not defined' maybe you have tried to use it before you loaded it? github.com/mrok/require

[neverfox]

You may never get undefined because $ is used by some debuggers, I believe, even if jQuery isn't loaded. You'll see something like function $() { [Command Line API] } but that's not jQuery.

[Dave Lancea]

Note, that if you only want to remove jQuery's take over of $, you can do return $.noConflict();, which will keep window.jQuery. This way jQuery plugins should all load fine (as shims only, I believe) and you can still have a clean $ (for other libraries to use.)

[neverfox]

Edited to reflect that option.

[jeremija]

I needed to add delete window.$ after the $.noConflict() call because it was set to undefined and mocha would report it as a global leak.

[pryabov]

MAPPING MODULES TO USE NOCONFLICT from requirejs site