require.js loading bootstrap undefined

Question

My main.js look as below

requirejs.config({
//By default load any module IDs from ../js
baseUrl: '../js',
paths : {
    'jquery': 'libs/jquery',
    'underscore': 'libs/underscore',
    'backbone': 'libs/backbone',
    'bootstrap': 'libs/bootstrap'
},
shim: {
    'jquery': {
        exports: '$'
    },
    'backbone': {
        //These script dependencies should be loaded before loading
        //backbone.js
        deps: ['jquery', 'underscore'],
        //Once loaded, use the global 'Backbone' as the
        //module value.
        exports: 'Backbone'
    },
    'underscore': {
        exports: '_'
    },
    'bootstrap': {
        deps: ['jquery'],
        exports: 'Bootstrap'
    }
}
});
define(
    ['jquery', 'backbone','underscore', 'bootstrap'],

    function (j, b,  u, boot) {
        console.log('jquery', j);
        console.log('backbone', b);
        console.log('underscore',u);
        console.log('bootstrap', boot);
    }
);

And my console image is like this:

enter image description here

When I click on X sign in alert, they disappear. So, I think bootstrap.js is loaded correctly. However, it says undefined in console. Can anyone make me clear is the bootstrap.js is loaded correctly and safe to use? And why it is saying undefined while rest of are defined well in console.

May be because all jquery, backbone and underscore create (export) globals, while bootstrap will just add plugins to the existing jquery object and won't export anything globally, hence won't receive anything in the define callback. — Cyclone
– Cyclone, Commented May 14, 2013 at 10:28
@Cyclone, so, technically i dont have problem the bootstrap library later. — user2314342
– user2314342, Commented May 14, 2013 at 12:43
Yes, if you've used any bootstrap thing on the page, and if its working, you should not have :) — Cyclone
– Cyclone, Commented May 14, 2013 at 12:44

Cyclone · Accepted Answer · 2013-05-14 13:26:39Z

3

As jquery, backbone, and underscore export global variables to be used elsewhere, while bootstrap will just take the existing jquery object and will add plugins to the object, hence it won't export anything.

So, if you try to receive it in define callback, ideally it will be undefined. If you've used any bootstrap component on the page and if it is working it means bootstrap is integrated.

From the requirejs shim docs

For "modules" that are just jQuery or Backbone plugins that do not need to export any module value, the shim config can just be an array of dependencies:
requirejs.config({
  shim: {
    'bootstrap': ['jquery']
  }
});

So, if you want, you can declare bootstrap like its specified in the docs.

answered May 14, 2013 at 13:26

Cyclone

1,5801 gold badge8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

require.js loading bootstrap undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related