Custom usage of RequireJS require() function

Question

I'm wondering why can't I use the require() function with something like this:

// I'm using define's sugar syntax
define(function(require) {  

  // This works fine. It assigns myModule to the myModule variable (no callback needed)
  var myModule = require('myModule');

  var getModule = function(name) {

    // This doesn work. Using require() here expects a callback
    return require(name);        
  };

  return getModule;
});

That second require() call throws (but taking a look with DevTools shows that <name> is actually loaded):

Uncaught Error: Module name <name> has not been loaded yet for context: _

Why does the first require() call just returns the module (no need to do it in a callback fashion), but the second require() call only works with a callback?

Unsure what the docs page is failing to explain? It's pretty thorough. — Simon Smith
– Simon Smith, Commented Mar 26, 2013 at 12:54
@SimonSmith The docs doesn't explain why do I need to use require() with a callback within the scope of my function. From outside I can just var dep = require('dep') — jviotti
– jviotti, Commented Mar 26, 2013 at 16:41
@jviotti I know this is a late reply, but as @Simon Smith pointed out in his answer, the reason it doesn't work is because it isn't simply executed like normal code. Requirejs actually parse your function for calls to require so it can build a dependency tree. In order to do that, it needs to know up front all the dependencies of a given module. It can't do that dynamically because it needs to know every dependency before it actually fetches anything. — David Ly
– David Ly, Commented Sep 10, 2015 at 14:55

Community · Accepted Answer · 2017-05-23 12:29:36Z

1

I'll follow up my comments here.

You can't use require without passing an array as a first argument anywhere except in a define callback that has require passed to it. And even that has limitations.

Trying to do this anywhere else will throw an error:

require('jquery', function() {});

http://requirejs.org/docs/errors.html#requireargs

The only time you can do it is here:

define(function(require) {
    var $ = require('jquery');
});

This is just a nicer way of writing:

define(['jquery'], function($) {

});

The first version is known as a sugar syntax - http://requirejs.org/docs/whyamd.html#sugar

The AMD loader will parse out the require('') calls by using Function.prototype.toString(), then internally convert the above define call

I've basically just repeated what is explained on the RequireJS docs, but hopefully that makes it a little clearer.

I also covered this topic in a different context here - How to achieve lazy loading with RequireJS?

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Mar 26, 2013 at 19:57

Simon Smith

8,0442 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jviotti Over a year ago

Yeah I know that. I think my question was not well written, sorry. Tried my best to fix it now. Please take a look

Collectives™ on Stack Overflow

Custom usage of RequireJS require() function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related