RequireJS - cannot load Bootstrap

Question

I am in the process of converting my app to use require.js, but I cannot seem to get Bootstrap to load. This is in outline what I'm doing (the following assumes a simple flat directory structure, with no subdirectories):

main.js

requirejs.config({
  paths: {
    "jquery": "jquery-1.12.4.min",
    "bootstrap" : "bootstrap.min"
  },
  shim: {
    "bootstrap": {
      deps: ["jquery"]
    }
  }
});

require(["jquery"], function($) {
  console.log($.fn);
});

index.html

<html>
   <head>
      <title>RequireJS Test</title>
      <link rel="stylesheet" type="text/css" href="./bootstrap.min.css">
   </head>
   <body>
      <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
         <ul class="nav navbar-nav">
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">File</a>
               <ul class="dropdown-menu">
                  <li><a href="#">Open...</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Save</a></li>
                  <li><a href="#">Save As...</a></li>
               </ul>
            </li>
         </ul>
      </div>
   </body>
   <script data-main="./main" src="./require.js"></script>
</html>

My Bootstrap navbar dropdowns do not function, and indeed when I investigate the jQuery object itself in the console I see nothing attached from bootstrap.min.js. But I cannot see what I'm doing wrong. My real app also uses Backbone, and that gets loaded without issue. For that I use the following shim:

'backbone': {
  'deps': ['jquery', 'underscore'],
  'exports': 'Backbone'
}

But the shim for Bootstrap is just not working for me. Am I missing something obvious?

I am using the latest versions of requirejs, bootstrap and jQuery.

Louis · Accepted Answer · 2016-05-29 17:20:50Z

1

You've not shown any code that actually causes Bootstrap to be loaded. Change your initial require to:

require(["jquery", "bootstrap"], function($) {
  console.log($.fn);
});

In case this is where your confusion originates: your shim says "when you load bootstrap, load jquery first". It does not trigger the loading of bootstrap. You have to list bootstrap as a dependency to require or define for the loading to happen.

answered May 29, 2016 at 17:20

Louis

152k28 gold badges288 silver badges332 bronze badges

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

3 Comments

ChrisM Over a year ago

Thank you, that worked. Indeed that was what confused me. I was under the impression that requirejs.config would just load everything just as in the case of a bunch of script tags. But I guess this is the 'asynchronous' bit of AMD, right?

Louis Over a year ago

requirejs.config() does not load anything unless you use the deps option at the top level to provide a list of modules to load. (This one is at the top level of the configuration. It is not the same as the deps inside individual shim values.) Note that the top level deps is exactly the same as doing require(<value of deps>) immediately after the require.config call.

ChrisM Over a year ago

Got it. Thank you for the clarification.

Collectives™ on Stack Overflow

RequireJS - cannot load Bootstrap

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related