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

Question

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

Its kind like related to bootstrap.

Thanks a lot in advance.

Answer 1

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.

Answer 2

My way is importing the jquery library.

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

Answer 3

solve this issue for angular

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]