Bootstrap - Uncaught TypeError: unable to read property 'fn' from undefined

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

Uncaught TypeError: Cannot read property 'fn' undefined

My gasket is similar to 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 embed .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 a screenshot of my chrome enter image description here

Its appearance is similar to bootstrap.

Thank you very much in advance.

+25
source share
5 answers

I need to download jquery first before downloading.

 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(); }); 

Fixed with charm !!

+72
source

My way is to import jquery library.

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

solve this problem 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" ] 
+3
source
 //Call .noConflict() to restore JQuery reference. jQuery.noConflict(); OR $.noConflict(); //Do something with jQuery. jQuery( "div.class" ).hide(); OR $( "div.class" ).show(); 
+1
source

I returned to jquery-2.2.4.min.js and it works.

+1
source

All Articles