New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dynamic requires don't find files in the browser #377

Closed
btakita opened this Issue Apr 11, 2013 · 15 comments

Comments

Projects
None yet
10 participants
@btakita

btakita commented Apr 11, 2013

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.

@substack

This comment has been minimized.

Show comment
Hide comment
@substack

substack Apr 11, 2013

Collaborator

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

Collaborator

substack commented Apr 11, 2013

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

@substack substack closed this Apr 11, 2013

@michaelficarra

This comment has been minimized.

Show comment
Hide comment
@michaelficarra

michaelficarra Apr 11, 2013

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

michaelficarra commented Apr 11, 2013

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

@sokra

This comment has been minimized.

Show comment
Hide comment
@sokra

sokra Apr 11, 2013

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

sokra commented Apr 11, 2013

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

@jackcviers

This comment has been minimized.

Show comment
Hide comment
@jackcviers

jackcviers Apr 11, 2013

@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.

jackcviers commented Apr 11, 2013

@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

This comment has been minimized.

Show comment
Hide comment

mjlescano commented Dec 27, 2014

@therebelrobot

This comment has been minimized.

Show comment
Hide comment
@therebelrobot

therebelrobot Mar 19, 2015

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?

therebelrobot commented Mar 19, 2015

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?

@substack

This comment has been minimized.

Show comment
Hide comment
@substack

substack Mar 20, 2015

Collaborator

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

Collaborator

substack commented Mar 20, 2015

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

@kyle-dorman

This comment has been minimized.

Show comment
Hide comment
@kyle-dorman

kyle-dorman Mar 20, 2015

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?

kyle-dorman commented Mar 20, 2015

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?

@substack

This comment has been minimized.

Show comment
Hide comment
@substack

substack Mar 20, 2015

Collaborator

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

Collaborator

substack commented Mar 20, 2015

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

@kyle-dorman

This comment has been minimized.

Show comment
Hide comment
@kyle-dorman

kyle-dorman Mar 20, 2015

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?

kyle-dorman commented Mar 20, 2015

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?

@meteorplus

This comment was marked as off-topic.

Show comment
Hide comment
@meteorplus

meteorplus Jun 11, 2018

this is still a big issue and in 2018 it is very important.

meteorplus commented Jun 11, 2018

this is still a big issue and in 2018 it is very important.

@ljharb

This comment was marked as off-topic.

Show comment
Hide comment
@ljharb

ljharb Jun 11, 2018

Contributor

It's certainly still a big issue if you're still doing dynamic requires in 2018.

Contributor

ljharb commented Jun 11, 2018

It's certainly still a big issue if you're still doing dynamic requires in 2018.

@meteorplus

This comment was marked as off-topic.

Show comment
Hide comment
@meteorplus

meteorplus Jun 11, 2018

@ljharb bro I use import in ES6 all the time but when a client requires you to use only browserify and nothing else you can do that...

meteorplus commented Jun 11, 2018

@ljharb bro I use import in ES6 all the time but when a client requires you to use only browserify and nothing else you can do that...

@ljharb

This comment was marked as off-topic.

Show comment
Hide comment
@ljharb

ljharb Jun 11, 2018

Contributor

bro

There’s no need to insult me.

nothing else

You can use require with a hardcoded string at module level just fine.

Contributor

ljharb commented Jun 11, 2018

bro

There’s no need to insult me.

nothing else

You can use require with a hardcoded string at module level just fine.

@meteorplus

This comment was marked as disruptive content.

Show comment
Hide comment
@meteorplus

meteorplus Jun 12, 2018

There’s no need to insult me.

@ljharb look bro! you're a nice bro ;)

You can use require with a hardcoded string at module level just fine.
That's what she said (what i did) ;)

meteorplus commented Jun 12, 2018

There’s no need to insult me.

@ljharb look bro! you're a nice bro ;)

You can use require with a hardcoded string at module level just fine.
That's what she said (what i did) ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment