jquerybackbone.jsunderscore.jstwitter-bootstrap-3shim

Bootstrap - Uncaught TypeError: Cannot read property 'fn' of undefined


I'm using jquery, backbonejs, underscorejs and bootstrap for my company project. Sometimes I got this error in chrome.

Uncaught TypeError: Cannot read property 'fn' of undefined

My shim is like this in my main.js

require.config({
paths: {
    jquery: 'libs/jquery/jquery',
    underscore: 'libs/underscore/underscore',
    backbone: 'libs/backbone/backbone',
    backboneeventbinder: 'libs/backbone.eventbinder.min',
    bootstrap: 'libs/bootstrap',
    jquerytablesorter: 'libs/tablesorter/jquery.tablesorter',
    tablesorter: 'libs/tablesorter/tables',
    ajaxupload: 'libs/ajax-upload',
    templates: '../templates'
},
shim: {
    'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    },
    'underscore': {
        exports: '_'
    },
}
});
 require(['app', ], function(App) {
  App.initialize();
});

I already insert .noConflict() for jquery, underscorejs and backbonejs.

My app.js

// Filename: app.js
define(['jquery', 'underscore', 'backbone', 'backboneeventbinder', 'bootstrap', 'ajaxupload', 'router', // Request router.js
], function($, _, Backbone, Bootstrap, Backboneeventbinder, Ajaxupload, Router) {
    $.noConflict();
    _.noConflict();
    Backbone.noConflict();
    var initialize = function() {
            Router.initialize();
        };
    return {
        initialize: initialize
    };
});

This is screenshot from my chrome enter image description here

Its kind like related to bootstrap.

Thanks a lot in advance.


Solution

  • You need to load jquery first before bootstrap.

    require.config({
        paths: {
            jquery: 'libs/jquery/jquery',
            underscore: 'libs/underscore/underscore',
            backbone: 'libs/backbone/backbone',
            bootstrap: 'libs/bootstrap',
            jquerytablesorter: 'libs/tablesorter/jquery.tablesorter',
            tablesorter: 'libs/tablesorter/tables',
            ajaxupload: 'libs/ajax-upload',
            templates: '../templates'
        },
        shim: {
            'backbone': {
                deps: ['underscore', 'jquery'],
                exports: 'Backbone'
            },
            'jquery': {
                exports: '$'
            },
            'bootstrap': {
                deps: ['jquery'],
                exports: '$'
            },
            'jquerytablesorter': {
                deps: ['jquery'],
                exports: '$'
            },
            'tablesorter': {
                deps: ['jquery'],
                exports: '$'
            },
            'ajaxupload': {
                deps: ['jquery'],
                exports: '$'
            },
            'underscore': {
                exports: '_'
            },
        }
    });
    require(['app', ], function(App) {
        App.initialize();
    });
    

    Works like charm! quick and easy fix.