Bootstrap - 未捕获的类型错误：无法读取未定义的属性“fn”答案

【问题标题】：Bootstrap - Uncaught TypeError: Cannot read property 'fn' of undefinedBootstrap - 未捕获的类型错误：无法读取未定义的属性“fn”
【发布时间】：2014-01-03 13:34:34
【问题描述】：

我在公司项目中使用 jquery、backbonejs、underscorejs 和 bootstrap。有时我在 chrome 中遇到此错误。

未捕获的类型错误：无法读取未定义的属性“fn”

我的 shim 在我的 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
    };
});

这是我的 chrome 截图

类似于bootstrap。

非常感谢。

【问题讨论】：

如何使用'noConflict'？
这个answer 可能有用

标签： jquery backbone.js underscore.js twitter-bootstrap-3 shim

【解决方案1】：

即使首先添加了 jquery，我也遇到了同样的问题，但通过首先同步添加 jquery - 删除异步标记 - 然后引导程序来解决它。

注意：我在我的 jquery 标签中添加了async 以异步加载它并遇到此错误，所以我更改了这个：

<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 正在同步加载，一切都很好。

【讨论】：

【解决方案2】：

我遇到了同样的问题。就我而言，我将所有 3 个链接都更改为其他版本的引导程序，并摆脱了该错误。我将 4.5 更改为 4.6

【讨论】：

【解决方案3】：

我遇到了同样的问题。 Firefox 向我显示了这个错误，但在 chrome 中一切正常。然后在谷歌搜索后，我在 index.html 中使用 google cdn for jquery 而不是加载本地 js 文件，问题就解决了。

【讨论】：

【解决方案4】：

bootstrap前先导入jquery：

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

【讨论】：

【解决方案5】：

要解决这个问题，只需在引导文件之前调用 jQuery 文件

【讨论】：

【解决方案6】：

你需要在引导之前先加载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();
});

像魅力一样工作！快速简便的修复。

【讨论】：

确实你需要先加载jquery :D

【解决方案7】：

我的方式是导入jquery库。

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

【讨论】：

【解决方案8】：

用角度解决这个问题

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

【讨论】：

【解决方案9】：

我回到 jquery-2.2.4.min.js 并且它工作正常。

【讨论】：

【解决方案10】：

//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