Cách khắc phục lỗi; 'Lỗi: Chú giải công cụ Bootstrap yêu cầu Tether (http://github.hubspot.com/tether/)'

Tôi đang sử dụng Bootstrap V4 và lỗi sau được ghi lại trong bảng điều khiển;

Lỗi: Chú giải công cụ Bootstrap yêu cầu Tether ( http://github.hubspot.com/tether/ )

Tôi đã cố gắng xóa lỗi bằng cách cài đặt Tether nhưng nó không hoạt động. Tôi đã 'cài đặt' Tether bằng cách bao gồm các dòng mã sau;

<link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css">
<script src="http://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>

Tôi đã 'cài đặt' tether chính xác chưa?

Bất cứ ai có thể giúp tôi loại bỏ lỗi này?

Nếu bạn muốn xem lỗi trên trang web của tôi, xin vui lòng bấm vào đây và tải giao diện điều khiển của bạn.

Đối với Bootstrap 4 ổn định:

Vì beta Bootstrap 4 không phụ thuộc vào Tether mà là Popper.js . Tất cả các tập lệnh ( phải theo thứ tự này):

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

Xem tài liệu hiện tại cho các phiên bản tập lệnh mới nhất.

Chỉ Bootstrap 4 alpha:

Bootstrap 4 alpha cần Tether , vì vậy bạn cần đưa vào tether.min.js trước khi đưa vào bootstrap.min.js, vd.

<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script src="https://npmcdn.com/bootstrap@4.0.0-alpha.5/dist/js/bootstrap.min.js"></script>

Nếu bạn đang sử dụng Webpack:

1. Thiết lập trình tải bootstrap như được mô tả trong tài liệu;
2. Cài đặt tether.js qua npm;
3. Thêm tether.js vào plugin ProvPlugin của gói webpack.

webpack.config.js:

plugins: [
        <... your plugins here>,
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            "window.Tether": 'tether'
        })
    ]

Nguồn

Nếu bạn đang sử dụng npm và browserify:

// es6 imports
import tether from 'tether';
global.Tether = tether;

// require
global.Tether = require('tether');

Cá nhân tôi sử dụng tập hợp con nhỏ của chức năng Bootstrap và không cần đính kèm Tether.

Điều này sẽ giúp:

window.Tether = function () {
  throw new Error('Your Bootstrap may actually need Tether.');
};

Nếu bạn muốn tránh thông báo lỗi và bạn không sử dụng mẹo công cụ Bootstrap, bạn có thể xác định window.Tether trước khi tải Bootstrap.

<script>
  window.Tether = {};
</script>
<script src="js/bootstrap.min.js"></script>

Bạn nên thực hiện hướng dẫn của tôi:
1. Thêm nguồn dưới đây vào Gemfile

source 'https://rails-assets.org' do
  gem 'rails-assets-tether', '>= 1.1.0'
end

2. Chạy lệnh:

   cài đặt gói

3. Thêm dòng này sau jQuery trong application.js.

   // = Yêu cầu jquery
   // = yêu cầu tether

4. Khởi động lại máy chủ đường ray.

Cài đặt tether qua npm như bên dưới

npm install tether --save-dev

sau đó thêm tether vào html của bạn ở trên bootstrap như bên dưới

<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="jspm_packages/github/twbs/bootstrap@4.0.0-alpha.2/js/bootstrap.js"></script>

Đối với webpack tôi đã giải quyết điều này với webpack.config.js:

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  "window.jQuery": "jquery",
  Tether: 'tether'
})

Một lưu ý bổ sung. Nếu bạn kiểm tra tệp javascript không nén, bạn sẽ tìm thấy điều kiện:

if(window.Tether === undefined) {
     throw new Error('Bootstrap tooltips require Tether (http://github.hubspot.com/tether)')
}

Vì vậy, thông báo lỗi chứa thông tin cần thiết.

Bạn có thể tải về kho lưu trữ từ liên kết đó .

Phiên bản không nén:

https://rawgit.com/HubSpot/tether/master/src/js/tether.js https://rawgit.com/HubSpot/tether/master/dist/css/tether.css

Sử dụng webpack tôi đã sử dụng điều này trong webpack.config.js:

var plugins = [

    ...

    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        'window.jQuery': 'jquery',
        'window.Tether': 'tether',
        tether: 'tether',
        Tether: 'tether'
    })
];

Có vẻ như đó Tetherlà thứ mà nó đang tìm kiếm:

var Tooltip = function ($) {

  /**
   * Check for Tether dependency
   * Tether - http://tether.io/
   */
  if (typeof Tether === 'undefined') {
    throw new Error('Bootstrap tooltips require Tether (http://tether.io/)');
  }

Tôi đã gặp vấn đề này với các yêu cầu sử dụng bản dựng boostrap 4 mới nhất. Tôi cuối cùng chỉ xác định:

<script>
  window.Tether = {};
</script>

trong thẻ đầu html của tôi để đánh lừa kiểm tra của bootstrap. Sau đó tôi đã thêm một câu lệnh yêu cầu thứ hai ngay trước yêu cầu tải ứng dụng của tôi và sau đó, phụ thuộc bootstrap của tôi:

require(['tether'], function (Tether) {
  window.Tether = Tether;
});

require([
  "app",
], function(App){
  App.initialize();
});

Sử dụng cả hai điều này song song và bạn sẽ không gặp vấn đề gì khi sử dụng bản dựng alpha bootstrap 4 hiện tại.

Hoạt động cho máy phát điện-aspnetcore-spa và bootstrap 4.

// ===== file: webpack.config.vendor.js =====    
module.exports = (env) => {
...
    plugins: [
        new webpack.ProvidePlugin({ $: 'jquery', 
                                    jQuery: 'jquery',
                                    'window.jQuery': 'jquery',
                                    'window.Tether': 'tether',
                                    tether: 'tether', 
                                    Tether: 'tether' }), 
// Maps these identifiers to the jQuery package 
// (because Bootstrap expects it to be a global variable)
            ...
        ]
};

Đối với webpack 1 hoặc 2 với Bootstrap 4 bạn cần

new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery',
   Tether: 'tether'
})

Nếu bạn đang sử dụng Brunch, bạn có thể thêm phần này vào cuối brunch-config.js:

npm: {
    enabled: true,
    globals: {
        $: 'jquery', jQuery: 'jquery', 'Tether': 'tether'
    }
}

Nếu bạn sử dụng trình tải AMD của.j.j

// path config
requirejs.config({
  paths: {
    jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js',
    tether: '//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min',
    bootstrap: '//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min',
  },
  shim: {
    bootstrap: {
      deps: ['jquery']
    }
  }
});

//async loading
requirejs(['tether'], function (Tether) {
  window.Tether = Tether;
  requirejs(['bootstrap']);
});

Đối với bạn, người dùng Laravel Mix đang chạy Bootstrap4, bạn sẽ cần chạy

npm installer tether --save

Sau đó cập nhật cho bạn resources/assets/js/bootstrap.jsđể tải Tether và đưa nó vào đối tượng cửa sổ.

Đây là giao diện của tôi: (Lưu ý tôi cũng phải chạy npm install popper.js --save)

window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
window.Tether = require('tether');
require('bootstrap');

Để thêm vào câu trả lời của @ adilapapaya. Đối với ember-clingười dùng cụ thể, cài đặt tethervới

bower install --save tether

và sau đó đưa nó vào ember-cli-build.jstệp của bạn trước khi bootstrap, như vậy:

// tether (bootstrap 4 requirement)
app.import('bower_components/tether/dist/js/tether.min.js');

// bootstrap
app.import('bower_components/bootstrap/scss/bootstrap-flex.scss');
app.import('bower_components/bootstrap/dist/js/bootstrap.js');

Và nếu sử dụng webpack, bạn sẽ cần plugin phơi bày. Trong webpack.config.js của bạn, hãy thêm trình tải này

{
   test: require.resolve("tether"),
   loader: "expose?$!expose?Tether"
}

Tôi đã có cùng một vấn đề và đây là cách tôi giải quyết nó. Tôi đang trên đường ray 5.1.0rc1

Hãy chắc chắn để thêm yêu cầu jquery và tether trong tệp application.js của bạn, chúng phải ở trên cùng như thế này

//= require jquery
//= require tether

Chỉ cần đảm bảo đã cài đặt tether

Phương pháp # 1 : Tải xuống từ đây và chèn nó vào các dự án của bạn hoặc
Phương pháp # 2 : sử dụng mã bên dưới trước nguồn kịch bản bootstrap của bạn:

<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>

Tôi khuyên bạn nên làm theo các hướng dẫn trong tài liệu Bootstrap 4 :

Sao chép-dán biểu định kiểu <link>vào <head>trước tất cả các biểu định kiểu khác để tải CSS của chúng tôi.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Thêm các plugin JavaScript, jQuery và Tether của chúng tôi ở gần cuối trang của bạn, ngay trước thẻ đóng. Hãy chắc chắn đặt jQuery và Tether trước, vì mã của chúng tôi phụ thuộc vào chúng. Mặc dù chúng tôi sử dụng bản dựng mỏng của jQuery trong các tài liệu của mình, phiên bản đầy đủ cũng được hỗ trợ.

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Giải pháp UMD / AMD

Đối với những người này, những người đang thực hiện nó thông qua UMD và biên dịch quarequire.js , có một giải pháp laconic.

Trong mô-đun, yêu cầu tetherlà phụ thuộc, tải Tooltipdưới dạng UMD, trước định nghĩa mô-đun, chỉ cần đặt đoạn mã ngắn vào định nghĩa của Tether:

// First load the UMD module dependency and attach to global scope
require(['tether'], function(Tether) {
    // @todo: make it properly when boostrap will fix loading of UMD, instead of using globals
    window.Tether = Tether; // attach to global scope
});

// then goes your regular module definition
define([
    'jquery',
    'tooltip',
    'popover'
], function($, Tooltip, Popover){
    "use strict";
    //...
    /*
        by this time, you'll have window.Tether global variable defined,
        and UMD module Tooltip will not throw the exception
    */
    //...
});

Đoạn mã ngắn này ngay từ đầu, thực sự có thể được đặt ở bất kỳ cấp độ cao hơn nào của ứng dụng của bạn, điều quan trọng nhất - để gọi nó trước khi sử dụng thực tế các bootstrapthành phần có Tetherphụ thuộc.

// ===== file: tetherWrapper.js =====
require(['./tether'], function(Tether) {
    window.Tether = Tether; // attach to global scope
    // it's important to have this, to keep original module definition approach
    return Tether;
});

// ===== your MAIN configuration file, and dependencies definition =====
paths: {
    jquery: '/vendor/jquery',
    // tether: '/vendor/tether'
    tether: '/vendor/tetherWrapper'  // @todo original Tether is replaced with our wrapper around original
    // ...
},
shim: { 
     'bootstrap': ['tether', 'jquery']       
}

CẬP NHẬT : Trong Boostrap 4.1 Ổn định, họ đã thay thế Tether , bằng Popper.js , xem tài liệu về cách sử dụng .

Tôi đã có cùng một vấn đề và tôi đã giải quyết nó bằng cách bao gồm jquery-3.1.1.min trước khi bao gồm bất kỳ js nào và nó hoạt động như một bùa mê. Hy vọng nó giúp.