dynamic requires don't find files in the browser

[btakita]

I'm trying to require a file dynamically.

<section data-view="views/root" id="root"></section>

I have a parse method which parses the DOM for data-view and requires that file.

function parse() {
  _.each($('[data-view]'), function(el) {
    var $el = $(el);
    require('./' + $el.data('view'));
  })
}

I then get the following error in the browser "Error: Cannot find module './views/root'". It works when I execute the code in node.js.

[ghost]

Browserify can only analyze static requires. It is not in the scope of browserify to handle dynamic requires.

[michaelficarra]

You should still get a compile-time error rather than a runtime error.

[sokra]

You can try webpack, which can handle this kind of require: example

[jackcviers]

@substack Thanks for the answer. That's what I assumed, and now have moved to using browserify only in the apps that depend on the libraries. For future reference, when I have questions like this, do you prefer issues or is there an irc room or message board? I assume that you don't want me to contact you via Twitter or email.

[mjlescano]

Just as a reference, got around with this with a hacky solution: http://stackoverflow.com/questions/21642398/compiling-dynamically-required-modules-with-browserify/27672458#27672458

[therebelrobot]

hey @substack, is there a specific reason this isn't in scope? I mean, it's a fairly easy use case to have an array of items, and do a simple forEach to require them in... is there something under the hood that is breaking on this, and if so, can I take a look at it for you?

[ghost]

@therebelrobot you can use a transform like bulkify to do that.

[kyle-dorman]

I'm trying to use the below umd syntax which uses a dynamic require statement:

// app/CachingStore
(function (define) {

// dependencies are listed in the dependency array
define(['./store', 'meld'], function (store, meld) {
"use strict";
  var cache = {};

    // create the module
    meld.around(store, 'get', function (jp) {
        var key = jp.args.join('|');
        return key in cache ? cache[key] : cache[key] = jp.proceed();
    };

    // return your module's exports
    return store;
});

}(
    typeof define == 'function' && define.amd
        ? define
        : function (ids, factory) {
            // note: the lambda function cannot be removed in some CJS environments
            var deps = ids.map(function (id) { return require(id); });
            module.exports = factory.apply(null, deps);
        }
));

Do you know if I van use bulkify to do this?

[ghost]

@kyle-dorman bulkify doesn't understand AMD. You can only give it globs of paths to require.

[kyle-dorman]

Ah ya that makes sense. I think I framed my question incorrectly.

This form of UMD uses dynamic require dependancies for CommonJS syntax.

var ids = ['./store', 'meld'];
var deps = ids.map(function (id) { return require(id); });
module.exports = factory.apply(null, deps);

I know this is not supported by Browserify but are you aware of any existing modules that can determine module dependancies for dynamic require statements?