RequireJS - Exporting a Set of Functions

Question

I'm experiencing an issue with RequireJS where I'm not able to export a set of functions when I have a require statement.

Let's assume I have a file called mySubFile.js, where, first I need to inject jQuery and then another dependency. Now, Let's suppose I have myFunction and I want to export it in order to get called from another file.

define('mySubFile', ['jquery'], function ($) {
    require(['dependency1'], function (dependency1) {

       let myFunction = function(){ return "Hey There"; }

       return : {
                    myFunction : myFunction
       }

    });
});

Now let's assume that I want to call that function from myFile.js:

define('myFile', ['jquery'], function ($) {
    require(['mySubFile'], function (mySubFile) {

       console.log(mySubFile.myFunction());

    });
});

This does not work. I get:

Cannot read property 'myFunction' of undefined.

On the other side, If I define mySubFile.js as follows:

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

   let myFunction = function(){ return "Hey There"; }

   return : {
               myFunction : myFunction
   }

});

I can access myFunction but I NEED to first resolve jQuery.

I'm struggling trying to find a solution to this but still haven't found anything.

How Can I Solve this?

You mean you need jquery before mySubFile module? – Nitesh Feb 23 '17 at 09:56 — Nitesh, Feb 23 '17 at 09:56
@NiteshI need to inject jQuery before anything else. – AndreaM16 Feb 23 '17 at 10:12 — AndreaM16, Feb 23 '17 at 10:12

score 1 · Answer 1 · answered Feb 23 '17 at 10:26

1

If you always need jQuery to be available before your module, you can do it like this:

define("mySubFile", function(require, exports, module){ 
    var a = require("jQuery"), // dependency
        b = require("knockout"); // dependency
    /* rest of the code for this module */ 

    let myFunction = function(){ return "Hey There"; }

   return : {
            myFunction : myFunction
         }
});

answered Feb 23 '17 at 10:26

Nitesh

1,490
1
12
20

The problem is not caused by jQuery and I'm already able to get it available before anything else. I'm having an issue on accessing an external function from another file when that subfile has a require statement. – AndreaM16 Feb 23 '17 at 10:30

score 1 · Accepted Answer · answered Feb 23 '17 at 11:43

Given the code you show in your question, this is really the way to go:

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

But you don't want to use it because:

can access myFunction but I NEED to first resolve jQuery.

Well, sure jquery will have to be resolved before you can return a value, but let's assume for a second that there's some magic that would allow your other attempt to return the value you want and let's just look at it from the perspective of what gets resolved when. This is what you have:

define('mySubFile', ['jquery'], function ($) {
    require(['dependency1'], function (dependency1) {

Here's what happens:

The define call is executed. RequireJS sees a module name (mySubFile), a dependency list ['jquery'] and a callback.
RequireJS resolves jquery and calls the callback with it.
The require call is executed. RequireJS sees a dependency list and a callback.
RequireJS resolves dependency1 and calls the callback.

Here too, jquery has to be resolved before you could return anything. Having a require inside the define callback does not change anything to this.

Getting the require call inside the define to work the way you want would need significant rewriting. The problem you're hitting on there, by the way, is not specific to RequireJS but a problem common to all asynchronous code. See this question for the general problem and approaches to it.

Thanks for the explanation. I'm aware of the asynchronous nature of the problem. If I do like you said at the beginning I haven't any *undefined* issues but my application just breaks up somehow since I'm not resolving jquery first. I'm taking a look at that question you've linked but can't find a way to resolve jquery first. Maybe using **$document(ready)**? — AndreaM16, Feb 23 '17 at 12:55
It's not clear to me why you're running into a problem. `jquery` is resolved before the callback to `define` is called. If `dependency1` *also* depends on `jquery` then you need to put `jquery` in its list of dependencies: either in its `define` call, or if it is a third-party non-AMD piece of code, you need to set a `shim` in RequireJS' configuration that lists `jquery` as a dependency. — Louis, Feb 23 '17 at 13:03
For instance, right now I've a problem where I have to trigger a given function which is located into another js file after **$(document).ready** but somehow I get **externalFile.thatFunction()** undefined since externalFile seems to get resolved at the same time as jQuery does. — AndreaM16, Feb 23 '17 at 13:24

RequireJS - Exporting a Set of Functions

2 Answers2