RequireJS - is jQuery case sensitive?

Question

I am attempting to get started with RequireJS, and am running into an annoying issue. . .

require.config({
    baseUrl: 'app_content/scripts',
    paths: {
        // the left side is the module ID,
        // the right side is the path to
        // the jQuery file, relative to baseUrl.
        // Also, the path should NOT include
        // the '.js' file extension. This example
        // is using jQuery 1.9.0 located at
        // js/lib/jquery-1.9.0.js, relative to
        // the HTML page.
        'jQuery': 'lib/jQuery/jQuery-2.0.3'
    }
});

This, using uppercase Q, does not work, But if I change it to jquery, it does. Also, this is true in my required areas...

<script type="text/javascript">
    require(["jQuery"], function ($) {
        console.log($);
    });
</script>

This returns undefined, but if I change everything to straight up jquery, it works.

Is this expected behavior, and is there anything I can do about it?

Answer 1

Yes, jQuery defines itself as 'jquery', all lowercase. That's normal.

If you open the source to jQuery you'll find:

// Register as a named AMD module, since jQuery can be concatenated with other
// files that may use define, but not via a proper concatenation script that
// understands anonymous AMD modules. A named AMD is safest and most robust
// way to register. Lowercase jquery is used because AMD module names are
// derived from file names, and jQuery is normally delivered in a lowercase
// file name. Do this after creating the global so that if an AMD module wants
// to call noConflict to hide this version of jQuery, it will work.
if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function () { return jQuery; } );
}

So you have to refer to it as "jquery" everywhere in RequireJS calls. The issue here is that the define that jQuery uses is a "named define" which is something we normally do not use when creating modules. The RequireJS optimizer adds these names for us when we run it.

At any rate, when a "named define" is used the module name is set to the name given to define rather than by file names (as is otherwise the case when we don't use a named define).

It is possible to rename "jquery" to "jQuery", like this:

require.config({
  baseUrl: "./js",
  paths: {
      "jquery": "jquery-1.10.2"
  }
});

define("jQuery", ["jquery"], function ($) {
   return $;
});

require(["jQuery"], function ($) {
   console.log($);
   console.log($("body")[0]);
});

I'm making use of the version of define that takes a name as the first parameter. Full example here.