Why isn't RequireJS passing jQuery into the functions alias?

Question

I downloaded the sample-project for the latest-release of RequireJS. Their documentation implies anything loaded is passed-into the parameter list of the associated function (in corresponding order).

So I decided to try it...but it doesn't seem to work!

Firebug (net tab) shows jQuery as being loaded: so RequireJS obvioulsy did that part successfully
Firebug (console tab) shows '$ is not a function'

My question is: Why isn't the alias getting populated?

MY CODE LOOKS LIKE:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="Scripts/require.js" type="text/javascript"></script>

    <script type="text/javascript">

        require(["scripts/jQuery/Core/jquery-1.7.2.min"], function ($) {

            // jQuery is not passed-into the function, so the alias fails!
            $(function () {
                var stop = "";
            });
        });

    </script>

</head>
<body>
    <form id="form1" runat="server">
    </form>
</body>
</html>

THIER SAMPLE LOOKS LIKE:

//Inside scripts/main.js
require(["some/module", "a.js", "b.js"], function(someModule) {
    //...
});

Miller Medeiros · Accepted Answer · 2012-04-13 15:22:36Z

17

jQuery should be loaded through the special name "jquery", otherwise it won't register itself (since jQuery uses a named define).

// create an alias that points to proper file
require.config({
  paths : {
    jquery : "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min"
  }
});

// require jquery usign the path config
require(["jquery"], function ($) {
    console.log($);
});

That is the main reasons why named define is considered an anti-pattern and should be used only when needed (when you have multiple modules inside same file).

edited Apr 13, 2012 at 15:22

answered Apr 13, 2012 at 15:11

Miller Medeiros

1,25614 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prisoner ZERO Over a year ago

Thank you, thank you, thank you, thank you! This was driving me NUTS!

nirazul Over a year ago

thank you! the only answer that worked for me to include a stand alone jQuery file.

James M. Greene · Accepted Answer · 2012-04-13 15:19:18Z

Be sure to read the "README.md" for the RequireJS+jQuery sample project. There are many complications with using jQuery that you need to decide on how best to tackle it for your project during the initial setup. Once you've figured out what's best for you and implemented it, though, it shouldn't be a problem again.

Much of the complication also comes from the fact that jQuery isn't a true AMD module, they just have a hack in the codebase to do a define if it detects the define function is available. For example, this means the jQuery module name will always be "jquery" (note the lowercase 'q') unless you wrap it yourself, so if you define the path for it in your config you MUST have the key named "jquery" (again, with a lowercase 'q') or there will be a mismatch. That bit us when first setting up RequireJS on our project (we named the key "jQuery").

David Millet · Accepted Answer · 2012-04-13 15:12:05Z

0

Is your scripts folder 'Scripts' or 'scripts'?

You're making a request for "Scripts/require.js" as well as for "scripts/jQuery/Core/jquery-1.7.2.min". Take a look at the Net tab of Firebug... I bet you're generating a 404 there.

answered Apr 13, 2012 at 15:12

David Millet

1

Collectives™ on Stack Overflow

Why isn't RequireJS passing jQuery into the functions alias?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related