Home/ Questions/Q 7597259
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T22:06:52+00:00

I’m a RequireJS noob. When I use require.config and include a path to jQuery

  • 0

I’m a RequireJS noob. When I use “require.config” and include a path to jQuery with a name different than jQuery, results are not as expected.

Here’s a very simple example to help explain my issue.

Structure of files

root
├── Index.htm
└── scripts
    ├── libs
    │   ├── jquery-1.7.1.js
    │   └── require.js
    ├── main.js
    └── someModule.js

index.htm

<html>
<head>
    <title>BackboneJS Modular app with RequireJS</title>
    <script data-main="scripts/main" src="scripts/libs/require.js"></script>
</head>
<body>
    <h3>BackboneJS is awesome</h3>
</body>
</html>

Here the script tag references require in scripts/libs. When require gets ran the JavaScript file called main.js in the scripts directory should be executed.

main.js

require.config({
   "paths": {
           "mod1": "someModule"
   }
});
require(["mod1"], function (sm) {
    console.log(sm.someValue);
});

In my experience the “mod1” can be anything as long as it’s referenced the same in the require.config path and in the require method.

someModule.js

define([], function () {
    console.log();
    return { someValue: "abcd" };
});

Just for completeness I included someModule.js

The perceived inconstancy occurs when I include JQuery.

In the following main.js I added jQuery to the config and the require method.

Main.js

require.config({
    "paths": {
        "jquery": "libs/jquery-1.7.1"
        ,"mod1": "someModule"
    }
});

require(["mod1", "jquery"], function (sm, $) {
    console.log(sm.someValue);
    console.log($);
});

With the additional of jQuery everything seems to still works. The “console.log($)” writes the jQuery function.

Now the kicker. In the following code I change “jquery” to “jqueryA” in both the paths and require

require.config({
    "paths": {
        "jqueryA": "libs/jquery-1.7.1"
        ,"mod1": "someModule"
    }
});

require(["mod1", "jqueryA"], function (sm, $) {
    console.log(sm.someValue);
    console.log($);
});

Now “console.log($)” writes null.

Should this be expected? Is there a reason why the name must be jquery, but for mod1 it can be anything?

I can work-around this without a problem, but this issue seems odd. I know I can use the combined RequireJS and jQuery file, but when jQuery has an update I don’t want to be dependent on RequireJS to include the new jQuery.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In jQuery 1.7 they decided to support AMD loading. To do this, it defines a module named ‘jquery’ which passes back a reference to the jQuery object. When you define your path to jquery with another name (eg ‘jqueryA’), things aren’t exactly breaking as you think they are.

    The jquery script always defines itself as a module named ‘jquery’, which is registered with require for your app. When you named your path shortcut ‘jquery’ and ‘jquery’ was loaded as a dependency, require was actually referencing the ‘jquery’ module defined by jquery-1.7.1.js, which does pass back the correct reference. When you name your module shortcut jqueryA, you are now referencing an undefined reference, because the jquery script itself does not pass back a reference, except via the module named ‘jquery’. It’s silly, I know.

    The jquery script defines the module as ‘jquery’ and expects that you will simply reference it as ‘jquery’. If you want to reference it as another name (and as a bonus, keep it from conflicting with other loaded jquery libraries), use this method:

    Use requirejs and jquery, without clobbering global jquery?

    • 0