requirejs modules not recognizing paths keys as keys and looking for key as if it was file name

Question

im new to requirejs and trying to get a simple structure working ( please see below ). ive tried multiple way but no luck with paths.

my goal is to set up requirejs config to be shared by all pages.

my approach was to have the data-main in the script tag of each page point to the module that corresponds to that page ( page.php to js/page.js ). and from corresponding module, call js/config.js as first dependency. problems was that path keys did not work in modules.

i then read that data-main in script tag should be set for configurations. so i tried, pointed data-main to js/config.js instead of corresponding page code. then added a second script tag in page. letting first script tag load in configuration first and then the second script tag loads in the module for that corresponding page. but same prob with paths, in modules path keys did not work.

problem is that when i use the path key ( lets say 'jquery' ) in a module ( ['jquery'] ), the browser looks for the 'jquery' key in the js folder and not in the 'libs/jquery' path i specified in js/config.js. so then added a baseRrl to 'js/' and then tried '/js' and then also tried '/js/' and also tried '/' infront of values in paths object. no luck.

then i tried pointing to the google CDN for jquery and browser still cant find it.

so then i changed the key from 'jquery' to 'ooo' and still the browser looks for a ooo.js file in the js dir instead of looking for the CDN as specified in config paths.

not sure if my file structure is wrong or if the paths and/or baseUrl are not set correctly. ive tried a lot of different ways with not success. please help. not sure if im already blind from looking at these too long and missing the obvious. thanks for any help.

file structure : 
------------
index.php

js/
- config.js
- index.js

- libs/
-- jquery.js
-- require.js
------------

index.php :

<head>
    <script data-main="js/config" src="js/libs/require.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
</body>

js/config.js :

require.config({
    baseUrl: 'js/',
    paths: {
        'ooo': 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
        //'ooo': 'libs/jquery',
        'mod': 'modules/module1'
    },
    shim: {
        'ooo': {
            exports: '$'
        }
    }
});

js/index.js :

require( ['ooo'], function( $ ) {

    $( document ).ready( function() {
        alert( 'work!' );
    });

});

Network tab in dev tool :

GET http://localhost/requirejs/site2/js/ooo.js 404 (Not Found)

Louis Louis · Accepted Answer · 2015-01-17T12:18:49

You cannot use data-main to load your configuration. What data-main does is tell RequireJS to initiate loading the module it points to, but there is no guarantee when this operation will finish. The error you are getting is because the require in js/index.js executes before js/config is loaded, so it does not use your configuration. A very simple way to fix this problem is by having a module instead of the require you have. So js/index.js would contain:

define(['ooo'], function( $ ) {
    $( document ).ready( function() {
        alert( 'work!' );
    });
});

And your RequireJS configuration could have the following option:

deps: [ 'index' ]

(Yes, that's just index, not js/index, nor js/index.js.) The deps option tells RequireJS to start loading some modules right away. Done this way, the code in js/index.js would not execute before your configuration is loaded.

requirejs modules not recognizing paths keys as keys and looking for key as if it was file name

index.php :

js/config.js :

js/index.js :

1 Answers