1

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!

Siguza
  • 21,155
  • 6
  • 52
  • 89
Kamran
  • 43
  • 6
  • Do you really mean that the `console.log` statement print `null` and not `undefined`? I'm asking because getting `null` is highly unusual, and suggests that the problem is not with RequireJS itself. A missing `shim` won't give you `null`. A bad value in `paths` won't give you `null`, etc. – Louis Apr 05 '14 at 20:27
  • yes - it printed null. turns out I was using a very old version of require js. I resolved my issue by updating the require js version and doing the shimconfig as described below. – Kamran Apr 05 '14 at 20:31

1 Answers1

2

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: '$'
     }
  }

});
Manish Mulimani
  • 17,535
  • 2
  • 41
  • 60
  • I figured it out. I was using an old version of requirejs and it was not reading the shimconfig. Now your answer makes it work. Thanks for your help! – Kamran Apr 05 '14 at 20:30