Getting 'Uncaught Error: Script error' for a declared dependency when using r.js

Question

I couldn't find an answer for my issue on SO or Github, so I am posting this:

I created a repo for this issue: https://github.com/saviomuc/requireJSMultiPage

I tried to set up require.js for a multipage project.

All is fine when I am running the page. But when I try to optimize the files with r.js I am getting this error:

GET http://localhost:63342/requirejs/www-build/js/library.js 404 (Not Found) require.js:7
Uncaught Error: Script error for: library
http://requirejs.org/docs/errors.html#scripterror 

The setup is like this:

js/app/app1.js
js/app/app1jq.js
js/lib/require.js
js/lib/library.js
main-page1.js

Currently require.js loads a file (main-page1.js) which contains this code

require(['common','app/app1','app/app1jq'], function (config) {});

common.js contains

    requirejs.config({
        paths: {
            library: 'lib/library'
        }
    });
    console.log('This is the config!');

app1jq.js contains

    define(function (require) {
        var library = require('library');
        console.log('This is dependent on library');
    });

Could this be an issue with the optimizer? Or did I do something wrong?

Best and thank you in advance!

Answer 1

The problem is that common is not guaranteed to be loaded first. So when RequireJS gets to require('library') then the configuration may or may not have been set. When you call require(['a', 'b', 'c'], function () {}) RequireJS is free to load c first, or b first, or a first. The order is not set. The only guarantee is that all the modules will be loaded before the callback is called.

So change main-page1.js so that it contains:

require(['common'], function () {
    require(['app/app1','app/app1jq']);
});

This will ensure that common is loaded before any of the code that depends on your configuration.