Can't load Bootstrap with RequireJS

javascript, requirejs, twitter-bootstrap

Solution

I found a working example here:

https://github.com/sudo-cm/requirejs-bootstrap-demo

I followed it to get my code to work.

According to that demo, especially app.js, you simply make a shim to catch Bootstrap's dependency on jQuery,

requirejs.config({
    // pathsオプションの設定。"module/name": "path"を指定します。拡張子（.js）は指定しません。
    paths: {
        "jquery": "lib/jquery-1.8.3.min",
        "jquery.bootstrap": "lib/bootstrap.min"
    },
    // shimオプションの設定。モジュール間の依存関係を定義します。
    shim: {
        "jquery.bootstrap": {
            // jQueryに依存するのでpathsで設定した"module/name"を指定します。
            deps: ["jquery"]
        }
    }
});

and then mark Bootstrap as a dependency of the app itself, so that it loads before `app.js`.

// require(["module/name", ...], function(params){ ... });
require(["jquery", "jquery.bootstrap"], function ($) {
    $('#myModalButton').show();
});

Finally, since `app.js` is the data-main,

<script type="text/javascript" src="./assets/js/require.min.js" data-main="./assets/js/app.js"></script>

Bootstrap's JS is guaranteed to load before any application code.

Problem

I can't seem to figure out how to load Bootstrap via RequireJS. None of the examples that I found worked for me. Here is my shim: ``` require.config({ // Sets the js folder as the base directory for all future relative paths baseUrl: "./js", urlArgs: "bust=" + (new Date()).getTime(), waitSeconds: 200, // 3rd party script alias names (Easier to type "jquery" than "libss/jquery, etc") // probably a good idea to keep version numbers in the file names for updates checking paths: { // Core libsraries // -------------- "jquery": "libs/jquery", "underscore": "libs/lodash", "backbone": "libs/backbone", "marionette": "libs/backbone.marionette", // Plugins // ------- "bootstrap": "libs/plugins/bootstrap", "text": "libs/plugins/text", "responsiveSlides": "libs/plugins/responsiveslides.min", 'googlemaps': 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDdqRFLz6trV6FkyjTuEm2k-Q2-MjZOByM&sensor=false', // Application Folders // ------------------- "collections": "app/collections", "models": "app/models", "routers": "app/routers", "templates": "app/templates", "views": "app/views", "layouts": "app/layouts", "configs": "app/config" }, // Sets the configuration for your third party scripts that are not AMD compatible shim: { "responsiveSlides": ["jquery"], "bootstrap": ["jquery"], "backbone": { // Depends on underscore/lodash and jQuery "deps": ["underscore", "jquery"], // Exports the global window.Backbone object "exports": "Backbone" }, "marionette": { // Depends on underscore/lodash and jQuery "deps": ["backbone", "underscore", "jquery"], // Exports the global window.Backbone object "exports": "Marionette" }, 'googlemaps': { 'exports': 'GoogleMaps' }, // Backbone.validateAll plugin that depends on Backbone "backbone.validate": ["backbone"] }, enforceDefine: true }); ``` and here is how I call Bootstrap: ``` define([ "jquery", "underscore", "backbone", "marionette", "collections/Navigations", 'bootstrap', ], function($, _, Backbone, Marionette, Navigations, Bootstrap){ ``` The error that I get is this: ``` Uncaught Error: No define call for bootstrap ``` Any ideas on how to get this resolved?

Original source

Related problems