require.js loaded modules are null for bootstrap and parse

Question

I am trying to load Parse JS (parse.com) and Bootstrap JS using RequireJS. I can't get it to work with these libraries, but other libraries seem to work fine (e.g. backbone.js).

I have made sure to include this in my index.html file:

<script data-main="js/main" src="js/libs/require/require.js"></script>

My main.js file is like so:

require.config({
  paths: {
    jquery: 'libs/jquery/jquery-min',
    underscore: 'libs/underscore/underscore-min',
    backbone: 'libs/backbone/backbone-min',
    bootstrap: 'libs/bootstrap/bootstrap-min',
    parse: 'libs/parse/parse-min',
    templates: '../templates'
  }

});

require([
  // Load our app module and pass it to our definition function
  'app',

], function(App){
  // The "app" dependency is passed in as "App"
  // Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
  App.initialize();
});

Finally my app.js is:

// Filename: app.js
define([
  'jquery', 
  'underscore', 
  'parse',
  'bootstrap',
  'router' // Request router.js
], function($, _, Parse, Bootstrap, Router){
  var initialize = function(){
    *console.log(Parse);*
    // Pass in our Router module and call it's initialize function
    Router.initialize();
  };

  return { 
    initialize: initialize
  };
});

If relevant here is my file structure:

/* File Structure
├── js
│   ├── libs
│   │   ├── jquery
│   │   │   ├── jquery-min.js
│   │   ├── backbone
│   │   │   ├── backbone-min.js
│   │   └── underscore
│   │   │   ├── underscore-min.js
│   │   └── parse
│   │   │   ├── parse-min.js
│   │   └── bootstrap
│   │   │   ├── bootstrap-min.js
│   │   └── require
│   │   │   ├── require.js
│   ├── router.js
│   ├── app.js
│   ├── main.js  // Bootstrap
│   └── text.js  //Require.js plugin
└── index.html

I see that my JS files for parse/bootstrap are being loaded by the browser in the firebug console tab, however the console.log statement in app.js returns null. When I print Router, _, or $ they are NOT null.

What am I doing wrong here? Any pointers? Thanks!

Answer 1

For non AMD files, you need to use shim config. Since parse-min exports it's functionality via global variable 'Parse', you need to specify the global variable name in shim config as shown below. Since bootstrap does not export a particular global variable, you can use any of it's plugin global variable such as $.fn.popover.

For more info on shim config, please read this : http://requirejs.org/docs/api.html#config-shim

require.config({
  paths: {
    jquery: 'libs/jquery/jquery-min',
    underscore: 'libs/underscore/underscore-min',
    backbone: 'libs/backbone/backbone-min',
    bootstrap: 'libs/bootstrap/bootstrap-min',
    parse: 'libs/parse/parse-min',
    templates: '../templates'
  },
  shim: {
     parse: {
        exports: 'Parse',
        deps: ["jquery"]
     },
     bootstrap: {
        exports: '$.fn.popover',
        deps: ["jquery"]
     },
     backbone: {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
     }, 
     underscore: {
        exports: '_'
     }, 
     jquery: {
        exports: '$'
     }
  }

});