understanding requirejs paths

Question

Using requirejs my main.js looks like this

requirejs.config({
    baseUrl: '/javascript/',
    paths: {
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
        async: 'requirePlugins/async',
            hbs: 'hbs'
    },
    waitSeconds: 7
});
define(['common'], function () {
    loadFonts();
});

The main.js is included in the page with a script call

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

Common is the basic function for the website, jquery doc ready function etc. wrapped in a define call:

define(['jquery'], function() {
    //jQuery dependant common code
});

This works fine, jQuery is loaded from the google CDN and the code is executed. But when i add a require call after the load of main.js

<script data-main="/javascript/main.js" src="/javascript/require-2.0.1.js"></script>
require(['jquery'], function ($) {
    //code
});

jquery is requested from /javascript/jquery.js instead of the defined path to the google cdn. I'm still a rookie at requirejs but it would seem to me that the path should be defined before any of the other requests are fired, can somebody please help me understand what I'm doing wrong?

Solution 1

I think this could be due to using the data-main attribute on the RequireJS script tag; for that to be parsed, RequireJS itself has to load and parse. In my testing (specifically for IE9), the browser would download and execute any script tags directly following the RequireJS script tag before parsing the RequireJS config file (the one specified by the data-main attribute).

To get around this, I simply quit using the data-main attribute and instead placed the config file as a normal script tag directly after the RequireJS script tag, and everything seems to be happy now.

Specifically, this is what it looks like (using your sample):

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

Solution 2

Maybe you put the config statement before require js being loaded.

You should load require.js first, put your config code after, then call require(['jquery'], ...);

The reason it searches /javascript/ is because your require.js file is located there and it is the default base url.

Your config may never be used by require.js.

See this tutorial about require config.

Comments

[Hans Skov]

I could, but jQuery defines itself as a amd module so I should be able to use 'jquery' instead of having to write the entire url every time. Why is the jquery link invalid?

[HungryCoder]

hi, i tried to visit http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min and found 404.

[HungryCoder]

i'm sorry, i forgot the requirejs appends .js to the script assuming all modules are scripts. your link is correct. sorry for confusing.

[Yuck]

After wasting over an hour on this I gave up on data-main as well. Using the two script approach eliminated my define loading errors. TYVM!