Use jQuery as a dependency without loading jQuery with RequireJS?

Question

Consider the following page:

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
    <script data-main="app" src="require.js"></script>
</body>
</html>

How can i use jQuery as a dependency for RequireJS modules when it's not loaded with RequireJS? I know jQuery exposes itself as a global AMD module, so i should be able to add it as a dependency, but i'm not quite sure how to.

I would like to be able to do the following:

require(['jquery'], function() {
    console.log('success')
});

And if jQuery has not yet finished loading, it should wait for it to complete, and then continue. Is this possible to do?

ddotsenko · Accepted Answer · 2013-02-14 08:10:06Z

2

Load jQuery second, RequireJS first. Run your main module when both are loaded.

<html>
<head>
    <script src="require.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
    <script>
        require(["app"], function(app){
            app.runMe()
        })
    </script>
</body>
</html>

jQuery will NOT register itself as AMD module if it does not see define.amd floating around. The only way to make it register itself properly is to load RequireJS before jQuery.

answered Feb 14, 2013 at 8:10

ddotsenko

5,0161 gold badge27 silver badges25 bronze badges

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

6 Comments

qwerty Over a year ago

Not really working for me. Here's what i've got: pastebin.com/MwGvAd7L I'm getting a mismatch error. I read the doc but didn't really give me much. I can't even do require('init'), i get the same error. Any ideas? This sounds like the solution i need, i just need to get it working. Edit: I should also mention it spits out the entire jquery source in the console.

qwerty Over a year ago

Turns out what was logged in the console wasn't jQuery, but BlockUI (whatever that is). If i remove BlockUI it works, but BlockUI is included by a plugin on my site so i can't remove it. Not really sure what to do here. Ideas?

qwerty Over a year ago

Found this in the bottom of BlockUI:

if (typeof define === 'function' && define.amd && define.amd.jQuery) { 		define(['jquery'], setup); 	} else { 		setup(jQuery); 	}

Why does it override jQuery with setup?

ddotsenko Over a year ago

BlockUI likely does NOT redefine jQuery. It depends and asks for jquery likely to extend it. Also, I don't see where you load jQuery in the PasteBin example you provided

qwerty Over a year ago

Sorry for the late reply, hope you're still around. Well, whatever it's doing, it doesn't seem to be the right way of doing it, right? I didn't include jQuery in the pastebin, because Wordpress loads it for me in the header. The order is as follows: 1) Require.js 2) jQuery 3) BlockUI. It should be working fine, shouldn't it?

|

Bredele · Accepted Answer · 2013-02-13 20:00:57Z

0

You should define jquery as a shim as following:

requirejs.config({
  shim: {
    'jquery': {
        exports: '$'
    }
  },
  path : {
    jquery : '$PATH/jquery.js'
  }
});

answered Feb 13, 2013 at 20:00

Bredele

1151 silver badge7 bronze badges

1 Comment

qwerty Over a year ago

What is the path for though, and what does shim actually do?

marty · Accepted Answer · 2013-02-15 16:14:10Z

One way to do this is to use the data-main attribute to load a main.js file with require.js:

<script data-main="main" src="require.js"></script>

where the main.js file is a flavour of:

requirejs.config({
    shim: {         // regard the shim structure as a dependency map
        'jquery': [],
        'app': ['jquery']    // app code will not execute before jquery is loaded
    },
    waitSeconds: 20
});

require(
    [
        'jquery',
        'app'
    ],
    function(
        $
    ) {
        //the plugins from the dependency array have been loaded.
        console.log ("jQuery and app loaded through require.js");
    }
);

The example above assumes that you load jquery.js from the same location as require.js (which is, your site)

Collectives™ on Stack Overflow

Use jQuery as a dependency without loading jQuery with RequireJS?

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related