Як виправити помилку; "Помилка: підказки для завантажувальних інструментів вимагають Tether (http://github.hubspot.com/tether/)"

Я використовую Bootstrap V4, і наступна помилка реєструється в консолі;

Помилка: підказки Bootstrap потребують Tether ( http://github.hubspot.com/tether/ )

Я спробував видалити помилку, встановивши Tether, але вона не спрацювала. Я "встановив" Tether, включивши наступні рядки коду;

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

Чи правильно я встановив тетер?

Чи може хтось допомогти мені усунути цю помилку?

Якщо ви хочете переглянути помилку на моєму сайті, натисніть тут і завантажте консоль.

Для Bootstrap 4 стабільний:

Оскільки бета-версія Bootstrap 4 не залежить від Tether, але Popper.js . Усі сценарії ( повинні бути в такому порядку):

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

Дивіться поточну документацію щодо новіших версій сценарію.

Тільки Bootstrap 4 alpha:

Bootstrap 4 альфа потребує Tether , тому вам необхідно включити , tether.min.js перш ніж включити bootstrap.min.js, наприклад.

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

Якщо ви використовуєте Webpack:

1. Налаштування завантажувача завантажувача, як описано в документах;
2. Встановити tether.js через npm;
3. Додайте tether.js до плагіна веб-пакету ProvidePlugin.

webpack.config.js:

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

Джерело

Якщо ви використовуєте npm та переглядаєте:

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

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

Особисто я використовую невеликий підмножина функцій Bootstrap і мені не потрібно приєднувати Tether.

Це має допомогти:

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

Якщо ви хочете уникнути повідомлення про помилку і не використовуєте підказки інструменту Bootstrap, ви можете визначити window.Tether перед завантаженням Bootstrap.

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

Ви повинні виконати моє керівництво:
1. Додайте нижче джерело до Gemfile

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

2. Виконати команду:

   встановити пакет

3. Додайте цей рядок після jQuery в application.js.

   // = вимагати jquery
   // = вимагати тетер

4. Перезавантажте сервер рейки.

Встановіть прив’язку через npm, як показано нижче

npm install tether --save-dev

потім додайте теттер у свій HTML над завантажувальним файлом, як нижче

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

Для веб-упаковки я вирішив це за допомогою webpack.config.js:

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

Додаткова примітка. Якщо ви перевірите нестиснений файл JavaScript, ви знайдете умову:

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

Тож повідомлення про помилку містить необхідну інформацію.

Ви можете завантажити архів за цим посиланням .

Некомпресована версія:

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

Використовуючи веб-пакет, я використовував це в webpack.config.js:

var plugins = [

    ...

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

Схоже, Tetherсаме той шукав:

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/)');
  }

У мене виникли проблеми з Requjs за допомогою новітньої збірки boostrap 4. Я закінчив просто визначаючи:

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

в моєму html тезі голови, щоб обдурити чек завантаження. Потім я додав другу заяву про вимогу перед вимогою, яка завантажує мою програму, а згодом і мою залежність завантажувальної програми:

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

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

Використовуючи обидва в тандемі, і у вас не повинно виникнути жодних проблем із використанням поточної збірки завантажувальної програми 4 альфа.

Працює для генератора-aspnetcore-spa та завантажувального пристрою 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)
            ...
        ]
};

Для веб-пакета 1 або 2 з Bootstrap 4 вам потрібно

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

Якщо ви використовуєте Brunch, ви можете додати це в кінці свого brunch-config.js:

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

Якщо ви використовуєте навантажувач AMD Requ.js:

// 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']);
});

Для вас користувачі Laravel Mix там, де працює Bootstrap4, вам потрібно буде запустити

npm installer tether --save

Потім оновіть, resources/assets/js/bootstrap.jsщоб завантажити Tether і перенести його до віконного об’єкта.

Ось як виглядає моя: (Зверніть увагу, я також повинен був бігати npm install popper.js --save)

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

Щоб додати відповідь на @ adilapapaya. Для ember-cliкористувачів конкретно, встановити tetherз

bower install --save tether

а потім включіть його у свій ember-cli-build.jsфайл перед завантажувальною програмою, наприклад:

// 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');

І якщо ви використовуєте webpack, вам знадобиться плагін Expose. Додайте цей завантажувач у свій webpack.config.js

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

У мене була така ж проблема, і ось як я її вирішив. Я на рейках 5.1.0rc1

Обов’язково додайте jquery і tether у файл application.js, вони повинні бути в самій верхній частині, як це

//= require jquery
//= require tether

Просто переконайтеся, що встановлено тетер

Спосіб №1 : Завантажте звідси та вставте його до своїх проектів, або
Спосіб №2 : використовуйте код нижче перед джерелом сценарію завантаження:

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

Рекомендую дотримуватися вказівок у документації Bootstrap 4 :

Скопіюйте та вставте таблицю стилів <link>у свій <head>перед усіма іншими таблицями стилів, щоб завантажити наш CSS.

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

Додайте наші плагіни JavaScript, jQuery та Tether наприкінці ваших сторінок, безпосередньо перед закриваючим тегом. Не забудьте поставити jQuery та Tether першими, оскільки наш код залежить від них. У той час як ми використовуємо тонку збірку jQuery в наших документах, повна версія також підтримується.

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

Рішення UMD / AMD

Для тих хлопців, які роблять це через UMD і збирають через require.js, існує лаконічне рішення.

У модулі, який вимагає tetherяк залежність, що завантажується Tooltipяк UMD, перед визначенням модуля, просто поставте короткий фрагмент на визначення 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
    */
    //...
});

Цей короткий фрагмент на самому початку фактично може бути поставлений на будь-який вищий рівень вашої програми, найголовніше - викликати його до фактичного використання bootstrapкомпонентів із Tetherзалежністю.

// ===== 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']       
}

UPD: У Boostrap 4.1 Stable вони замінили Tether , а Popper.js дивіться документацію щодо використання .

У мене була така ж проблема, і я вирішив її, включивши jquery-3.1.1.min, перш ніж включити будь-який js, і він працював як шарм. Сподіваюся, це допомагає.