RequireJs dependency always undefined

Question

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.

Solution

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 recommend reading as much documentation as possible before diving in.

Comments

[Infolord101]

Spot on! its quite obvious now