RequireJS - loading multiple config files

Question

I am trying to load several RequireJS configs. In my html I am loading my main config via

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

and once the document is ready I want to load all my plugin configs. So I created a new define file which holds a function that calls require.config:

define(['sharedServices/logger'], function (logger) {

    function configVideo() {
        logger.info('Adding video modules');

        require.config({
            path: {

                Capabilities: 'videoProvider/Capabilities',
                VideoProviderEnums: 'videoProvider/VideoProviderEnums',
                VideoProviderCommon: 'videoProvider/VideoProviderCommon',
                VideoProviderInstance: 'videoProvider/VideoProviderInstance',
                DummyVideoInstance: 'videoProvider/DummyProvider/DummyVideoInstance'
            }
        });
    }

    return {
        configVideo: configVideo
    };

})

However, I get the following error:

Uncaught Error: Mismatched anonymous define() module: function (logger) {

Answer 1

The error you're getting isn't directly related to the stated problem (loading multiple configurations), but is caused by the way your code loading is organized. As the manual says:

To avoid the error:

• Be sure to load all scripts that call define() via the RequireJS API. Do not manually code script tags in HTML to load scripts that have define() calls in them.
• If you manually code an HTML script tag, be sure it only includes named modules, and that an anonymous module that will have the same name as one of the modules in that file is not loaded.

So the problem now is that when loading the module manually (as you state "when the document is ready", could you clarify how the quoted source is actually loaded?) requirejs doesn't know where the module came from, so it can't assign it a name. If the module were loaded via requirejs api (e.g. if it appeared in a dependencies list of a define call) and it were requirejs itself that determined its script path, it would name the module after the file.

In general it is advisable to have just a single script tag loading all the requirejs-managed javascript. This makes the development setup more closely match the eventual optimized situation (where all the scripts are concatenated together). It is still possible to make require.config calls inside individual modules if necessary and make some code execute only after document is ready. As an example, many our apps do something like the following in their main.js (the module loaded by the requirejs script tag):

// sort of bootstrap config
require.config({
  packages: [{ 
    name: "our-framework",
    location: "../../our-framework/src/"
  }],
  // here some app-specific requirejs options
  waitSeconds: 5
});

// load the framework, the "our-framework/rjs-config" contains 
// framework specific requirejs config (another require.config call)
require(["our-framework/rjs-config"], function() {

  // in this context both require configs are loaded

  require(["application"], function(application) {
    application.init().run();
  });

});