'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.

jquerybackbone.jsunderscore.jstwitter-bootstrap-3shim


Solution 1:[1]

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"
            ]

Solution 2:[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>

Solution 3:[3]

To solve this problem just call jQuery file before the bootstrap file

Solution 4:[4]

Import jquery first before bootstrap:

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.bundle.js"></script>

Solution 5:[5]

//Call .noConflict() to restore JQuery reference.

jQuery.noConflict(); OR  $.noConflict();

//Do something with jQuery.

jQuery( "div.class" ).hide(); OR $( "div.class" ).show();

Solution 6:[6]

I went back to jquery-2.2.4.min.js and it works.

Solution 7:[7]

I had the same problem even jquery was added firs but solved it by adding first the jquery synchronously -deleting asynch tag- then bootsrap.

Note: I added async to my jquery tag to load it asynchronously and faced this error so then I changed this:

<script async src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
   integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
   crossorigin="anonymous"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
   integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
   crossorigin="anonymous"></script>
<script async src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
   integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
   crossorigin="anonymous"></script>

to :

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
<script async src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>

Now my jquery is loading synchronously and everything is fine.

Solution 8:[8]

I had the same problem. Firefox showed me this error but in chrome everything was OK. then after a google search, i used google cdn for jquery in index.html instead of loading local js file and the problem solved.

Solution 9:[9]

I had the same problem. In my case, I changed all 3 links to other versions of bootstrap and got off from that error. I changed 4.5 to 4.6 

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rokive
Solution 2
Solution 3 Omar Abusabha
Solution 4 josue
Solution 5 Manishearth
Solution 6 Daniel00127
Solution 7 Mahdi-Jafaree
Solution 8 Saleh Rezaei
Solution 9 Rojeeme

Related Questions