require.js and jquery init

Question

I am testing require.js to get a more structure way to load library dependencies. But I cannot seem to get a basic example to work with jQuery. The only thing I can see I am doing differently than the examples is that my JS libs are on a different subdomain.

Code:

<script src="http://scripts.test.com/arkon-main.js"></script>
<script src="http://scripts.test.com/require.js"></script>

arkon-main.js

 var require = {    
 baseUrl: 'http://scripts.test.com',
paths: {     
    page: 'http://mypage.test.com/script/page/',
    jQuery: 'jquery',

},
shim: {
    'jQuery': {
        exports: '$'
    }
}

};

The page module (this is PHP code that serves the JS, hence the URL):

require(["jQuery"], function($) {
    $(document).ready(function() {
        alert('YES');
    });
});

In the HTML:

<script>require(["page"]);</script>

In my "Network" view in Chrome it looks (almost) good, I can see arkon-main.js, require.js, page module and jquery loaded successfully. However:

My problem is that page is loaded before jQuery which causes that part to fail. I do not understand why, since I would expect the require to load jQuery then run the code inside?

I have tried different versions and also the examples on requirejs web-page, but I cannot make it work in my environment. I just want a basic setup where I can use require to load libraries as they are needed when I load new pages (in the right order).

Suggestions?

Louis Louis · Accepted Answer · 2014-03-28T11:13:24

jQuery must be requested as jquery, all lower caps because the name jquery is hardcoded in the jQuery code. (Unfortunate, but that's the way it is.) Also, if you are using jQuery from 1.9.x onwards (and maybe even earlier versions too), you must not specify a shim.

These two issues only serve to mislead RequireJS and may be what is causing your problem.

require.js and jquery init

1 Answers