Problem: We currently have the following require.config:

require.config({
    paths: {
        lodash: '/embed/lodash',
        utils: '/embed/utils',
        analytics: '/external/analytics'
    }
});

file paths that start with embed are guaranteed to exist. file paths that start with external may or may not be available, depending on the environment. If I begin my main.js with the following:

require(['lodash', 'utils', 'analytics'], function (_, utils, analytics) {

and analytics can't be found, the whole thing crashes (as expected). Trying variations on the following proved fruitless:

require(['lodash', 'utils'], function (_, utils) {
    ...code and stuff
    $.ajax({ url: '/path/to/actual/file' })
        .done(function () {
            require(['analytics'], function (analytics) {
                // throws Mismatched anonymous define() module Error
            });
        })
        .fail(function () {
            // continue with stub of analytics
            // or not run analytics dependent code
        });

As per the title of this question: Is there a way to conditionally include a module in RequireJS based on whether or not the file is accessible?

Problem: We currently have the following require.config:

require.config({
    paths: {
        lodash: '/embed/lodash',
        utils: '/embed/utils',
        analytics: '/external/analytics'
    }
});

file paths that start with embed are guaranteed to exist. file paths that start with external may or may not be available, depending on the environment. If I begin my main.js with the following:

require(['lodash', 'utils', 'analytics'], function (_, utils, analytics) {

and analytics can't be found, the whole thing crashes (as expected). Trying variations on the following proved fruitless:

require(['lodash', 'utils'], function (_, utils) {
    ...code and stuff
    $.ajax({ url: '/path/to/actual/file' })
        .done(function () {
            require(['analytics'], function (analytics) {
                // throws Mismatched anonymous define() module Error
            });
        })
        .fail(function () {
            // continue with stub of analytics
            // or not run analytics dependent code
        });

As per the title of this question: Is there a way to conditionally include a module in RequireJS based on whether or not the file is accessible?

• javascript
• requirejs
• amd

Share Improve this question Follow asked Mar 12, 2015 at 0:56 irysiusirysius 60044 silver badges1313 bronze badges 6

• What do u exactly want to do when there is 404 for analytics? U dont want to load fallback as per your ment, so please elaborate about what exactly u want... – Vishwanath Commented Mar 13, 2015 at 4:21
• When the analytics 404s, the app should not crash, so the answer to your question is - when analytics 404s, I don't want to do anything with analytics for the rest of the execution. – irysius Commented Mar 13, 2015 at 4:35
• So u have analytics code like analytics.send(), which u dont care about if in local, in that case u can supply the object with the methods that u use from analytics in the fallback. – Vishwanath Commented Mar 13, 2015 at 4:46
• Updated the answer to depict replacing analytics... – Vishwanath Commented Mar 13, 2015 at 15:58
• apologies, but my coworker informed me that I should have read the crappy documentation of RequireJS, and proceeded to give me the correct solution to my problem. Thanks for your help. – irysius Commented Mar 14, 2015 at 22:06

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

If you want fallback to be downloaded when your external file is not available, you can use path fallback configuration in requireJS.

Set your path configuration like following.

require.config({
    paths: {
        lodash: '/embed/lodash',
        utils: '/embed/utils',
        analytics: ['/external/analytics',
                     '/embed/analytics'
                ]
    }
});

Then create a file analytics.js in embed directory which gives you the object normally returned by analytics from outside. If external/analytics adds a object in the global namespace, do that as well.

embed/analytics.js

define(function(){
    var analytics = window.analytics = {
        send : function(){
            //Nothing to do here.
        }
        //,... //Add more methods used by your code like send
    }
    return analytics;
});

From my colleague, who provided the correct solution to my problem, and kindly told me to RTFM: http://requirejs/docs/api.html#errbacks

Keeping "normal" declaration of require.config, just add an error callback to handle the case when the module can't be found.

require(['lodash', 'utils'], function (_, utils) {
    ...code and stuff
    require(['analytics'], function (analytics) {
        // normal execution

    }, function (error) {
        // continue with stub of analytics
        // or not run analytics dependent code at all

    });