Require JS baseUrl conflict

Question

I have two Javascript file loading from the same domain. Each JS performing different function and for that, I have used requirejs module loader.
My problem is, I have used require.config call under both js and baseUrl is different for both configuration.
JS1

require.config({
                baseUrl : server + "js/", // server is 192.168.1.10:3000/
                paths : 
                {
                    jquery : "jquery",
                    moment : "moment.min"
                },
                waitSeconds: 20
            });
            require(["jquery","moment"], function(jQuery,moment)
            {
                jQuery.noConflict();
                window.moment = moment;                 
                jQuery(function($)
                {
                    window.$191 = $;
                    callback($191); 
                });
            });  

JS2

require.config({
                baseUrl: "http://192.168.1.9:6060/App/resources",
                paths:
                {
                    moment: "js/moment.min",
                    ejs :  "js/ejs"
                }
            });
require(["moment","ejs"],function()
{
        callback("OK");
});

I am loading JS1 first followed by JS2, but when I am loading JS2 its baseUrl change by 1st one i.e. from JS1 (server+"js/") !! Which is totally wrong. Can some one point me out here, if something I have done wrong.

Answer 1

Nikos Paraskevopoulos has the right idea for one way (multiversion) to approach this, but I think there are two ways.

1. Using multiversion

Passing two configs to require.config() will return to you two unique require functions.

// It is important to give the config objects a "context" name.
// This is what keeps them unique.
var r1 = require.config({
    context: "r1",
    baseUrl: "//rawgithub.com/requirejs/text/2.0.10/"
});
var r2 = require.config({
    context: "r2",
    baseUrl: "//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.10/"
});

In addition, even if you used the same baseUrl in each config in the sample above, each text module would be a unique instance because of the nature of multiversion support.

These can be used to load modules from different URLs. In the example below, text1 and text2 are different module instances, even though they are essentially the same file.

r1(["require", "text"], function(r, text1) {
    // ...
});
r2(["require", "text"], function(r, text2) {
    // ...
});

The "require" module is required as a dependency if you use the var myModule = require("..."); syntax within the module body.

If all your dependencies are declared in the dependency array then you do not need this.

(There is a simple example of this at this jsfiddle)

But back to your example, you can assign local require functions to each file, and load modules via that local require function.

JS1

(function () {
    var r = require.config({
        context: "JS1",
        baseUrl: server + "js/", // server is 192.168.1.10:3000/
        paths: {
            jquery: "jquery",
            moment: "moment.min"
        },
        waitSeconds: 20
    });
    r(["jquery", "moment"], function (jQuery, moment) {
        jQuery.noConflict();
        window.moment = moment;
        jQuery(function ($) {
            window.$191 = $;
            callback($191);
        });
    });
}());

JS2

(function () {
    var r = require.config({
        context: "JS2",
        baseUrl: "http://192.168.1.9:6060/App/resources/",
        paths: {
            moment: "js/moment.min",
            ejs: "js/ejs"
        }
    });
    r(["moment", "ejs"], function () {
        callback("OK");
    });
}());

Aside

It's unusual for modules to not start with a call to the define() function, however. Usually, config and the modules are in separate files. So you might have:

• JS1-config.js and JS1.js
• JS2-config.js and JS2.js

And JS1.js and JS2.js would be of the form:

define(["array", "of", "dependencies"], function(array_, of_, dependencies_) {
});

2. Using a consolidated require config

A cohesive application is probably better served with a single module loader configuration file. You have visibility on all the required modules, and it'll probably play better with the r.js optimiser, should you want to use that.

As such, I would recommend consolidating your configs into a single config for your application. This way you don't mix the module loader config with the code that actually uses the modules.

If you can't modify some of the code, then this could be tricky to do though.

E.g.:

var baseUrl1 = server + "js/";
var baseUrl2 = "http://192.168.1.9:6060/App/resources/";
require.config({
    paths: {
        jquery: baseUrl1 + "jquery",
        moment: baseUrl1 + "moment.min",
        //moment: baseUrl2 + "js/moment.min",
        ejs: baseUrl2 + "js/ejs"
    },
    waitSeconds: 20
});

This assumes that both JS files can use the same "moment" module.