Bootstrap - 未捕获的类型错误：无法读取未定义的属性“fn”
我正在为我的公司项目使用 jquery、backbonejs、underscorejs 和 bootstrap。有时我在 chrome 中遇到此错误。
未捕获的类型错误：无法读取未定义的属性“fn”
我的垫片在我的 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();
});
我已经为jquery、underscorejs 和backbonejs 插入了.noConflict()。
我的 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
};
});
https://i.stack.imgur.com/dVvat.png
它有点像与引导程序有关。
提前非常感谢。
您需要在引导之前先加载 jquery。
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();
});
像魅力一样工作！快速简便的修复。
解决这个问题的角度
"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"
]
我的方法是导入 jquery 库。
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
要解决这个问题，只需在引导文件之前调用 jQuery 文件
在引导之前先导入 jquery：
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.bundle.js"></script>
//Call .noConflict() to restore JQuery reference.
jQuery.noConflict(); OR $.noConflict();
//Do something with jQuery.
jQuery( "div.class" ).hide(); OR $( "div.class" ).show();
noConflict(): 就在包含 jQuery 之后。 api.jquery.com/jQuery.noConflict
我回到 jquery-2.2.4.min.js 并且它有效。
我有同样的问题，即使 jquery 是先添加的，但通过首先同步添加 jquery - 删除异步标记 - 然后 bootsrap 来解决它。
注意：我将 async 添加到我的 jquery 标记中以异步加载它并遇到此错误，所以我更改了这个：
<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>
至 ：
<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>
现在我的 jquery 正在同步加载，一切都很好。
我有同样的问题。 Firefox 向我显示了这个错误，但在 chrome 中一切正常。然后在谷歌搜索之后，我在 index.html 中使用 google cdn for jquery 而不是加载本地 js 文件，问题就解决了。
我有同样的问题。就我而言，我将所有 3 个链接都更改为其他版本的引导程序，并摆脱了该错误。我将 4.5 更改为 4.6
关注公众号
不定期副业成功案例分享
