requirejs ignoring my mainConfigFile

[starangelam]

Project Intro

My project is a single page storefront. The project has multiple modules, and each module contains a set of controller.js, view.js and model.js files, as well as a template.html file. And uses requirejs to manage dependencies.

Problem Statement

I want to use mainConfigFile to provide paths to reference modules in grunt-requirejs. Part of my mainConfigFile's require.config is stored in separate file (base.dependency.config), and require.config.paths are pieced together by underscore at runtime.

base.dependency.config

config = {
    baseDependencyConfig: {
        paths: { ... }
        shim: { ... }
    }
}

main.js

var dependencies = config.baseDependencyConfig;
var basePaths = config.baseDependencyConfig.paths;
var extensionPaths = {
    // extra sets of paths
};

// combine base paths and extension paths at runtime using underscore
var dependencyPaths = _.extend(basePaths, extensionPaths);

dependencies.paths = dependencyPaths;
require.config(dependencies);

// application startup
require(['app', 'eventbus']) {
    // code
}

Error

However, grunt requirejs is ignoring mainConfigFile, grunt requirejs tries to find 'app.js' under root, when in fact, 'app' is defined under require.config paths as

'app': 'modules/base/app/base.app.controller'

my gruntFile:

module.exports = function (grunt) {
  grunt.initConfig({
    // ... other plugin config
    requirejs: {
      options: {
        baseUrl: 'public',
        // the paths for the named modules such as 'app' are defined 
        // in main.js under require.config paths
        name: 'main',
        include: [
           'app',
           'cart',
           'category'
        ],
        out: 'public/build/app-optimized.js',
        mainConfigFile: 'public/main.js',
        findNestedDependencies: true,
        optimizeCss: 'none',
        cssImportIgnore: 'style/style.css, style/mocha.css',
      }
    }
  })
}

my file structure

public
    |--modules/
    |       |--base/
    |       |       |--cart
    |       |       |--category
    |       |               |--category.controller.js
    |       |               |--category.view.js
    |       |               |--category.model.js
    |       |               |--category.template.html
    |       |
    |       |--extension/
    |
    |--style/
    |--image/
    |--main.js <-- main config file
    |--other .js files

• mainConfigFile, main.js lives in root, along with a few other application startup js files
• main bulk of application files lives inside modules folder
• each module folder contains its controller, view and model js file, as well as a template.html file

[bencevans]

@starangelam had any luck with this issue since you filed it?

[starangelam]

@bencevans No, unfortunately. I posted in stackOverflow as well. But no insight offered yet. http://stackoverflow.com/questions/19415369/grunt-requirejs-ignores-paths-from-my-mainconfigfile

[bencevans]

@starangelam That's a shame, I'm having a look around for working examples. This one seems to be using the mainConfigFile ok... https://github.com/neoziro/bootstart

[starangelam]

@bencevans I think I should clarify that this gruntFile was working when I had this setup for mainConfigFile:

main.js

require.config({
    paths: { ... },
    shim: { ... }
});

// application startup
require(['app', 'eventbus']) {
    // code
}

[is-already-taken]

I had the same project setup and error and found the cause.

r.js won't recognize RequireJS configs in the file referenced at mainConfigFile when the config object is not passed as JSON object, because it's passed as previously declared variable, for example.

I've created a patch (actually two). I could provide diffs to fix r.js. I'm currently trying to build and write tests for r.js to incorporate my patch. I'll create an improvement issue these days.

[asciidisco]

@is-already-taken :+1:

[is-already-taken]

Uh. It's more complicated contributing to r.js than I thought.

Tests of the latest release are failing ony my system. Unable to post proposals on the mailing list (post deleted?). Required to sign a CLA for more than two changed lines of code? (I know: maybe even 5 or 10 lines might not require a CLA, but it looks quite bureaucratic).

The only workaround I could recommend is the approach we used in another project: Do not use mainConfigFile. Export the config object based on environment detection (runnign in browser or as NodeJS module). Require the config in Grunt and pass the object as value to the Grunt config.

main.js

// ...
if (typeof exports != "undefined") {
    // NodeJs context
    module.exports.requireJsConfig = requireJsConfig;
}
// ...

Gruntfile

var requireConfig = require("/path/to/main.js").requireJsConfig;

requireConfig = extend(requireConfig, { /* modifications */ });

// ...

grunt.initConfig({
  requirejs: {
    options: requireConfig
  }
});

I'll go with this way (workaround) at first. Actually I started implementing the code and Grunt this way at first then finding mainConfigFile.