Как исправить ошибку; «Ошибка: для всплывающих подсказок начальной загрузки требуется Tether (http://github.hubspot.com/tether/)»

176

Я использую 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>

Правильно ли я установил трос?

Может кто-нибудь помочь мне удалить эту ошибку?

Если вы хотите просмотреть ошибку на моем сайте, нажмите здесь и загрузите консоль.

Майкл Л.Б.
источник
Привет, вы можете опубликовать код, который вы используете? было бы лучше, если бы вы могли поместить код в jsfiddle или где-то еще.
kucing_terbang
Нет реального кода для публикации, но если вы посетите www.atlasestateagents.co.uk и посмотрите консоль, то увидите ошибку javascript?
Майкл Л.Б.
Я использовал эти точные строки кода, и они устранили ошибку для меня в V3, для всех, кто интересуется этой версией.
Уильям
@MichaelLB, вместо ссылки на ваш сайт, я бы порекомендовал разместить здесь несколько фрагментов кода, в самом вопросе, будет ли ваш сайт обновлен, и он потеряет актуальность.
Farside
Решение stackoverflow.com/questions/47431612/…
Пауло Моизес

Ответы:

239

Для стабильной версии 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>
adilapapaya
источник
1
Исправлено, спасибо! Однако, исправление, которое приведет к новому предупреждению, может быть, к новому вопросу? mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create'
Майкл Л.Б.
Большой! Я думаю, что ошибка, которую вы получаете, исходит из bootstrap.min.jsбиблиотеки. Это все еще появляется, если вы закомментируете это. Да, я бы отправил новый вопрос, если у Google нет решения. :)
adilapapaya
Попробуйте использовать npmcdn для ссылки на пакеты, опубликованные на npm, так как некоторые люди, как правило, удаляют файлы build / dist из github. https://npmcdn.com/tether@1.2.4/dist/иhttps://npmcdn.com/bootstrap@4.0.0-alpha.2/dist/
eddywashere
2
но это странно, v4-alpha.getbootstrap.com ничего не говорит об этом
Максим Семеныхин
Это делает на версии aplha.3. Просто была эта ошибка. Я полагаю, что tether теперь загружен как пакет и больше не включен. Таким образом, вам придется включить этот скрипт также.
Тим Вермален
19

Если вы используете 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'
        })
    ]

Источник

Снеговик
источник
Это все что тебе нужно. Я делаю это, и это не работает.
Генри
9
Как я уже упоминал в выпуске Github, более новые версии Bootstrap (например, 4.0.0-alpha.6) теперь ищут «Tether» вместо «window.Tether».
ThePadawan
18

Если вы используете npm и browserify:

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

// require
global.Tether = require('tether');
Янник Бек
источник
14

Лично я использую небольшое подмножество функций Bootstrap и мне не нужно подключать Tether.

Это должно помочь:

window.Tether = function () {
  throw new Error('Your Bootstrap may actually need Tether.');
};
Цезарь Даниил Новак
источник
1
так что вы предлагаете разрезать эти строки? не хорошо, так как вы не должны изменять поставщиков и сторонние библиотеки, это помешает вам делать обновления позже. Если вы не используете эти компоненты Bootstrap, как вы сказали - зачем вам нужен Tether ... поэтому я не совсем понимаю ценность вашего вклада.
Farside
1
Предупреждение Tether показывается даже, если вы не используете функцию начальной загрузки, для которой требуется Tether. Мое решение скрывает надоедливое сообщение в консоли.
Цезарий Даниэль Новак
2
И это изменение не обновляет скрипты третьих сторон или поставщиков. Вы можете добавить его выше <script src = "bootstrap.js">
Цезарь Даниэль Новак,
Я вас не очень понимаю, почему бы тогда не быть в одной строке window.Tether = window.Tether || {};? Кроме того, в вашем решении есть предостережение, что оно может стереть уже определенную зависимость в глобальной области видимости, если модуль будет загружен до того, как ваша вещь будет выполнена.
Farside
5
Это хак для альфа-версии Bootstrap. Я не вижу причин быть разборчивыми :-) Если разработчик не хочет использовать Tether, стереть уже определенную зависимость нельзя. И на мой взгляд window.Tether = window.Tether || {};хуже, потому что его выкинет Tether is not a function, а не содержательная ошибка.
Цезарь Даниил Новак
10

Если вы хотите избежать сообщения об ошибке и не используете подсказки Bootstrap, вы можете определить window.Tether перед загрузкой Bootstrap.

<script>
  window.Tether = {};
</script>
<script src="js/bootstrap.min.js"></script>
Дональд Рич
источник
Это хорошо сработало для меня ... в моем случае я использую angular с начальной загрузкой. Спасибо!
MizAkita
Работал, я добавил то же самое в моем файле, теперь он работает нормально. Спасибо за эту идею. window.Tether = {}; define(['tether'], function (Tether) { return window.Tether = Tether; });
Эхсан Агаи
8

Вы должны сделать мое руководство:
1. Добавьте нижеприведенный источник в Gemfile

source 'https://rails-assets.org' do
  gem 'rails-assets-tether', '>= 1.1.0'
end
  1. Команда выполнения:

    комплектация

  2. Добавьте эту строку после jQuery в application.js.

    // = требуется jquery
    // = требуется привязь

  3. Перезапустите сервер рельсов.

Quy Le
источник
7

Установите трос через 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>
cjfarrelly
источник
2
или беседа, как этоbower install tether --save-dev
Farside
13
Разве это не должно быть npm install tether --saveвместо --save-dev? Это будет необходимо и в производстве.
siannone
7

Для веб-пакета я решил это с webpack.config.js:

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  "window.jQuery": "jquery",
  Tether: 'tether'
})
opmind
источник
5

Дополнительное примечание. Если вы проверите несжатый файл 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

Антон Лыхин
источник
3

Используя веб-пакет, я использовал это в 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/)');
  }
Генри
источник
Спасибо, что сработало, я бы посоветовал вам отредактировать свой ответ, чтобы удалить неиспользованную строкуtether: 'tether',
ghiscoding
Вы правы, но в качестве примера я думаю, что это иллюстрирует тот факт, что требуется точное именование.
Генри
2

У меня возникла эта проблема с requirejs, использующим новейшую сборку boostrap 4. Я просто определил:

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

в моем HTML-теге головы, чтобы обмануть проверку начальной загрузки. Затем я добавил второе требование require непосредственно перед требованием, которое загружает мое приложение, и впоследствии мою зависимость при начальной загрузке:

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

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

Используя оба из них в тандеме, у вас не должно возникнуть проблем с использованием текущей сборки начальной загрузки 4.

Throttlehead
источник
2

Работает для генератора-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)
            ...
        ]
};
Владимир
источник
Достаточно только трех: ... new webpack.ProvidePlugin ({$: 'jquery', jQuery: 'jquery', Tether: 'tether'}), ...
Наставник
1

Для webpack 1 или 2 с Bootstrap 4 вам нужно

new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery',
   Tether: 'tether'
})
Djalas
источник
1

Если вы используете Brunch, вы можете добавить это в конце вашего brunch-config.js:

npm: {
    enabled: true,
    globals: {
        $: 'jquery', jQuery: 'jquery', 'Tether': 'tether'
    }
}
Эге Эрсоз
источник
1

Если вы используете загрузчик AMD require.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']);
});
Лукас Пирс
источник
Это действительно помогло мне. Я застрял на этом целую вечность - не понимал, что вы можете вкладывать требуемые вызовы. Upvote для вас, сэр.
grimdog_john
1

Для пользователей 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');
Нули-и-оны
источник
0

Добавить к ответу @ 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');
wuher
источник
0

И если вы используете webpack, вам понадобится плагин expose. Добавьте в ваш webpack.config.js этот загрузчик

{
   test: require.resolve("tether"),
   loader: "expose?$!expose?Tether"
}
Суббота
источник
0

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

Убедитесь, что вы добавили require jquery и tether в ваш файл application.js, они должны быть в самом верху, как это

//= require jquery
//= require tether

Просто убедитесь, что трос установлен

Рубен Круз
источник
0

Метод № 1 : загрузите отсюда и вставьте его в свои проекты, или
метод № 2 : используйте приведенный ниже код перед исходным кодом сценария начальной загрузки:

<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
Хамид
источник
0

Я рекомендую следовать инструкциям в документации 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>
CodeBiker
источник
0

Решение 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 , см. Документацию по использованию .

Дальняя сторона
источник
-2

У меня была та же проблема, и я решил ее, включив jquery-3.1.1.min перед тем, как включить js, и это сработало как шарм. Надеюсь, поможет.

Jakamollo
источник