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.
This question is related to
jquery
backbone.js
underscore.js
twitter-bootstrap-3
shim
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"
]
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>
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.
//Call .noConflict() to restore JQuery reference.
jQuery.noConflict(); OR $.noConflict();
//Do something with jQuery.
jQuery( "div.class" ).hide(); OR $( "div.class" ).show();
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>
I went back to jquery-2.2.4.min.js and it works.
To solve this problem just call jQuery file before the bootstrap file
Source: Stackoverflow.com