Variable in require path not working with r.js

Question

I am new to r.js optimization but a fan of requirejs

build-config.js

({
    appDir: "./src/main/webapp/webresources/javascript/",
    baseUrl: "./",
    dir: "./target/webresources/js",
    
    optimizeCss: "none",
    mainConfigFile: "./src/main/webapp/webresources/javascrip/app.js",
    
    inlineText: true,
    removeCombined: true,
    
    modules: [
    {
        name: "app",
    }
    ]
})

app.js looks something like

if (typeof _JSHome=== "undefined") {
    _JSHome = "/webresources/javascript/edulastic";
}

if (typeof EditorValue === "undefined") {
    EditorValue = "";
}

require.config({

    baseUrl: '/webresources/javascript',
    waitSeconds: 180,
    paths: {
        tpl                    : _JSHome+'/js/tpl',
        underscore             : 'underscore-min',
        backbone               : 'backbone-min',
        text                   : 'text/text',
        jquery                  : 'jquery',
        jqueryuitouchpunch     : "jquery.ui.touch-punch",
        modernizr              : 'modernizr',
        hammer                 : 'hammer.min',
        detectizr              : 'detectizr',
        bootstrap              : _edulasticJSHome+'/bootstrap/js/bootstrap.min',
        fastClick              : "mobileutils/fastclick/fastclick.min",
        asMetaData             : _JSHome+'/js/app/metaData',
        highCharts             : '/webresources/javascript/highcharts/highcharts-min',
    },
});

When I run r.js -o build-config.js in my project root directory, I'm getting the following error :

Try only using a config that is also valid JSON, or do not use mainConfigFile and instead copy the config values needed into a build file or command line arguments given to the optimizer.

Source error from parsing: e:/mongrel_mpq/src/main/webapp/webresources/javascript/app.js: > ReferenceError: _JSHome is not defined

Duplicate but without solution - Require.js optimizer and variables in paths

Answer 1

The configuration you have in app.js is a computed configuration. For instance, you set _JSHome to a value and then use it in the configuration. At runtime, there is no problem with this. However, r.js is not designed to execute what you pass to mainConfigFile. What it does is look for a JSON object that is passed to require.config (or requirejs.config) and uses the JSON object. It is as if r.js were to go into your app.js file and copy all the text inside require.config(...) and then paste it into its own execution context. When it tries to use what it captured from your app.js file, you get the error that _JSHome is not defined because in the context where r.js interprets your configuration, _JSHome is not defined.

The simple solution would be to have a configuration which is not computed. However, if you need to have a computed configuration, then to get r.js to work with it, it needs to be computed before r.js sees it. This could be done as part of a build system (with Grunt, Gulp, make, etc.).