I am using require Js and am getting rather confused as to why my modules are loading but dependencies are always undefined and even upon using require.defined() function to check if my module has been loaded it indeed has been but when I use the require([deps], function(deps){}); all of my dependencies are undefined (except for jquery, underscore and knockout)

my file structure is as follows my file structure is as follows

scripts 
    |
    |        
    main.js
    |
    |_________BusinessScripts
    |           |
    |           |
    jquery.js   |
    |           |
    |           boostrapper.js-undefined
    ko.js       |
                |
                dataservice.js-undefined

here is an example of my main file that kicks off require

requirejs.config(
    {
        paths: {
            'jquery': 'jquery-1.7.1',
            'underscore': 'underscore',
            'ko': 'knockout-2.2.1'
        },
        shim: {
            underscore: { exports: '_' },
        }
    }
);


requirejs(['require', 'BusinessScripts/bootstrapper', 'BusinessScripts/dataservice'],
function (require,bootstrapper, dataservice) {

    var def = require.defined('BusinessScripts/bootstrapper'); //this returns true

    if (dataservice !== undefined) { // always undefined

        alert("Loaded properly");
    } else {
        alert("not loaded!!!");
    }

    if (bootstrapper !== undefined) { // always undefined


        alert("Loaded properly");
    } else {
        alert("not loaded!!!");
    }

});

my data service class does a quite lengthy jquery get but as a simple example my bootstrapper is doing next to nothing

//bootstrapper
define(function () { var one = 1; 
var run = function () {
}
});

//dataservice

define(['jquery', 'underscore'],function ($, _) {
    $.ajax({lengthy work...});

});

as I said both modules are being loaded but are never resolving

any help would be much appreciated.

I am using require Js and am getting rather confused as to why my modules are loading but dependencies are always undefined and even upon using require.defined() function to check if my module has been loaded it indeed has been but when I use the require([deps], function(deps){}); all of my dependencies are undefined (except for jquery, underscore and knockout)

my file structure is as follows my file structure is as follows

scripts 
    |
    |        
    main.js
    |
    |_________BusinessScripts
    |           |
    |           |
    jquery.js   |
    |           |
    |           boostrapper.js-undefined
    ko.js       |
                |
                dataservice.js-undefined

here is an example of my main file that kicks off require

requirejs.config(
    {
        paths: {
            'jquery': 'jquery-1.7.1',
            'underscore': 'underscore',
            'ko': 'knockout-2.2.1'
        },
        shim: {
            underscore: { exports: '_' },
        }
    }
);


requirejs(['require', 'BusinessScripts/bootstrapper', 'BusinessScripts/dataservice'],
function (require,bootstrapper, dataservice) {

    var def = require.defined('BusinessScripts/bootstrapper'); //this returns true

    if (dataservice !== undefined) { // always undefined

        alert("Loaded properly");
    } else {
        alert("not loaded!!!");
    }

    if (bootstrapper !== undefined) { // always undefined


        alert("Loaded properly");
    } else {
        alert("not loaded!!!");
    }

});

my data service class does a quite lengthy jquery get but as a simple example my bootstrapper is doing next to nothing

//bootstrapper
define(function () { var one = 1; 
var run = function () {
}
});

//dataservice

define(['jquery', 'underscore'],function ($, _) {
    $.ajax({lengthy work...});

});

as I said both modules are being loaded but are never resolving

any help would be much appreciated.

• javascript
• requirejs

2 Answers 2

You're not returning anything from your bootstrapper or dataservice modules, so the "public" part of the module is undefined. RequireJS simply executes body of the define function and returns undefined implicitly. I think a good analogy is to think of a module as a black box with all internals hidden, only allowing access through the public interface (which is whatever you return from module's final return statement)

You should rewrite your modules a bit, for example:

bootstrapper.js

define(function () {
  var one = 1;
  var run = function () {
    console.log('Running...');
  }

  return {
    publicRun: run,
    publicOne: one
  }
});

dataservice.js

define(['jquery', 'underscore'],function ($, _) {
  $.ajax({
    // lengthy work...
  });

  return 'Lengthy work started!';
});

Then you could use these modules like this:

requirejs(['require', 'BusinessScripts/bootstrapper', 'BusinessScripts/dataservice'],
  function (require, bootstrapper, dataservice) {
    // prints "1"
    console.log(dataservice.publicOne);

    // prints "Running..."
    dataservice.publicRun();

    // prints "Lengthy work started!"
    console.log(bootstrapper);
  });

The official docs covers the topic of defining modules in detail, I'd remend reading as much documentation as possible before diving in.

This answer doesn't fully 'match' the question's (specific) circumstance, but it may help someone for the (general) question - Why is my dependency undefined?

Tip: Double check that your dependency isn't dependent on the thing you're trying to get dependent on...

i.e. If you want A to depend on B, double check that B isn't depending on A.