Jak naprawić błąd; „Błąd: etykiety narzędzi Bootstrap wymagają Tether (http://github.hubspot.com/tether/)”


176

Używam Bootstrap V4 i następujący błąd jest rejestrowany w konsoli;

Błąd: etykiety narzędzi Bootstrap wymagają Tether ( http://github.hubspot.com/tether/ )

Próbowałem usunąć błąd, instalując Tether, ale to nie zadziałało. „Zainstalowałem” Tether, dołączając następujące wiersze kodu;

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

Czy poprawnie zainstalowałem tethering?

Czy ktoś może mi pomóc usunąć ten błąd?

Jeśli chcesz zobaczyć błąd w mojej witrynie, kliknij tutaj i załaduj konsolę.


Cześć, czy możesz wysłać kod, którego używasz? byłoby lepiej, gdybyś mógł umieścić kod w jsfiddle lub gdzieś indziej.
kucing_terbang

Nie ma prawdziwego kodu do wysłania, ale jeśli odwiedzisz www.atlasestateagents.co.uk i wyświetlisz konsolę, zobaczysz błąd javascript?
Michael LB,

Użyłem dokładnie tych wierszy kodu i usunęli za mnie błąd w V3, dla każdego, kto zastanawiał się nad tą wersją.
William

@MichaelLB, zamiast linku do Twojej witryny, radziłbym umieścić tutaj fragmenty kodu, w samym pytaniu, czy Twoja witryna zostanie zaktualizowana i straci aktualność.
Farside

Odpowiedzi:


239

Dla stabilnej wersji Bootstrap 4:

Ponieważ beta Bootstrap 4 nie zależy od Tether, ale Popper.js . Wszystkie skrypty ( muszą być w tej kolejności):

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

Zobacz aktualną dokumentację dla najnowszych wersji skryptów.


Tylko Bootstrap 4 alpha:

Bootstrap 4 alpha potrzebuje Tether , więc tether.min.js przed dołączeniem musisz załączyć bootstrap.min.jsnp.

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

1
Naprawiono, dziękuję! Jednak naprawienie tego prowadzi do nowego ostrzeżenia, może na nowe pytanie? 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'
Michael LB

Wspaniały! Myślę, że błąd, który otrzymujesz, pochodzi z bootstrap.min.jsbiblioteki. Czy nadal się wyświetla, jeśli to skomentujesz? Tak, zadałbym nowe pytanie, jeśli Google nie ma rozwiązania. :)
adilapapaya

Rozważ użycie npmcdn do linkowania do pakietów opublikowanych na npm, ponieważ niektórzy ludzie mają tendencję do usuwania plików build / dist z github. https://npmcdn.com/tether@1.2.4/dist/orazhttps://npmcdn.com/bootstrap@4.0.0-alpha.2/dist/
eddywashere

2
ale to dziwne, v4-alpha.getbootstrap.com nic o tym nie mówi
Maksym Semenykhin

Działa w wersji aplha.3. Właśnie miałem ten błąd. Uważam, że tether jest teraz pobierany jako pakiet i nie jest już dołączany. Musisz więc dołączyć również ten skrypt.
Tim Vermaelen

19

Jeśli używasz Webpack:

  1. Skonfiguruj program ładujący zgodnie z opisem w dokumentacji;
  2. Zainstaluj tether.js przez npm;
  3. Dodaj tether.js do wtyczki ProvidePlugin pakietu webpack.

webpack.config.js:

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

Źródło


Czy to wszystko, czego potrzebujesz. Robię to i nie działa.
Henry

9
Jak wspomniałem w sprawie Github, nowsze wersje Bootstrapa (np. 4.0.0-alpha.6) szukają teraz „Tether” zamiast „window.Tether”.
ThePadawan

18

Jeśli używasz npm i browserify:

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

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

14

Osobiście używam niewielkiego podzbioru funkcji Bootstrap i nie muszę podłączać Tethera.

To powinno pomóc:

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

1
więc co proponujesz, aby wyciąć te linie? niedobrze, ponieważ nie powinieneś modyfikować dostawców i bibliotek innych firm , uniemożliwi to późniejsze aktualizacje. Jeśli nie używasz tych komponentów Bootstrap, jak mówisz - dlaczego potrzebujesz Tether ... więc nie rozumiem wartości twojego wkładu.
Farside

1
Ostrzeżenie o tetheringu jest wyświetlane, nawet jeśli nie używasz funkcji ładowania początkowego, która wymaga Tether. Moje rozwiązanie ukrywa irytującą wiadomość w konsoli.
Cezary Daniel Nowak

2
Ta zmiana nie polega na aktualizowaniu skryptów innych firm lub dostawców. Możesz dodać go powyżej <script src = "bootstrap.js">
Cezary Daniel Nowak

Naprawdę cię nie rozumiem, dlaczego więc nie tylko jedno-liniowiec, podobnie window.Tether = window.Tether || {};? Ponadto w rozwiązaniu jest zastrzeżenie, że może ono wymazać już zdefiniowaną zależność w zakresie globalnym, jeśli moduł zostanie załadowany przed wykonaniem Twojej rzeczy.
Farside

5
To jest hack do wersji alfa Bootstrap. Nie widzę powodu, aby być wybrednym :-) Jeśli programista nie chce używać Tether, wyczyszczenie już zdefiniowanej zależności nie jest problemem. A moim zdaniem window.Tether = window.Tether || {};jest gorzej bo wyrzuci Tether is not a functionzamiast sensownego błędu.
Cezary Daniel Nowak

10

Jeśli chcesz uniknąć komunikatu o błędzie i nie korzystasz z podpowiedzi narzędzia Bootstrap, możesz zdefiniować window.Tether przed załadowaniem Bootstrap.

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

U mnie to zadziałało ... w moim przypadku używam angulara z bootstrapem. Dzięki!
MizAkita

Pracowałem, dodałem to samo w moim pliku, teraz działa dobrze. Dzięki za ten pomysł. window.Tether = {}; define(['tether'], function (Tether) { return window.Tether = Tether; });
Ehsan Aghaei

8

Powinieneś zrobić moją wskazówkę:
1. Dodaj poniższe źródło do Gemfile

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

    instalacja pakietu

  2. Dodaj tę linię po jQuery w application.js.

    // = wymagają jquery
    // = wymagają powiązania

  3. Zrestartuj serwer szynowy.


7

Zainstaluj tether przez npm, jak poniżej

npm install tether --save-dev

następnie dodaj tether do swojego html powyżej bootstrap, jak poniżej

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

2
lub altanka w ten sposóbbower install tether --save-dev
Farside

13
Czy nie powinno być npm install tether --savezamiast tego --save-dev? Będzie potrzebny również w produkcji.
siannone

7

W przypadku webpacka rozwiązałem to za pomocą webpack.config.js:

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


3

Używając webpacka, użyłem tego w webpack.config.js:

var plugins = [

    ...

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

Wygląda na Tetherto, że to ten, którego szukał:

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

Dzięki, że zadziałało, sugeruję edycję odpowiedzi, aby usunąć nieużywaną liniętether: 'tether',
ghiscoding

Masz rację, ale myślę, że jako przykład ilustruje to, że wymagane jest dokładne nazewnictwo.
Henry

2

Miałem ten problem z requirejs przy użyciu najnowszej kompilacji Boostrap 4. Skończyło się na tym, że zdefiniowałem:

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

w moim tagu head html, aby oszukać test bootstrapa. Następnie dodałem drugą instrukcję wymagania, tuż przed wymaganiem, które ładuje moją aplikację, a następnie moją zależność bootstrap:

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

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

Używając obu w tandemie, nie powinieneś mieć problemu z używaniem obecnej wersji alfa bootstrap 4.


2

Działa dla generator-aspnetcore-spa i 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)
            ...
        ]
};

Wystarczy tylko trzy: ... nowy pakiet sieciowy.ProvidePlugin ({$: 'jquery', jQuery: 'jquery', Tether: 'tether'}), ...
Mentor

1

Do webpacka 1 lub 2 z Bootstrap 4 potrzebujesz

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

1

Jeśli korzystasz z opcji brunch, możesz dodać to na końcu swojego brunch-config.js :

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

1

Jeśli używasz modułu ładującego require.js AMD:

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

To naprawdę mi pomogło. Utknąłem w tym przez wieki - nie zdawałem sobie sprawy, że możesz obsłużyć wymagane połączenia. Głos za panem, sir.
grimdog_john

1

Dla użytkowników Laravel Mix korzystających z Bootstrap4, będziesz musiał uruchomić

npm installer tether --save

Następnie zaktualizuj, resources/assets/js/bootstrap.jsaby załadować Tether i przenieść go do obiektu okna.

Oto jak wygląda mój: (Uwaga też musiałem biec npm install popper.js --save)

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

0

Aby dodać do odpowiedzi @ adilapapaya. W ember-cliszczególności dla użytkowników zainstaluj tetherz

bower install --save tether

a następnie dołącz go do swojego ember-cli-build.jspliku przed bootstrapem, na przykład:

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

0

A jeśli używasz webpacka, będziesz potrzebować wtyczki expose. W swoim webpack.config.js dodaj ten program ładujący

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

0

Miałem ten sam problem i tak go rozwiązałem. Jestem na szynach 5.1.0rc1

Upewnij się, że dodałeś require jquery i tether w pliku application.js, muszą one znajdować się na samej górze, tak jak to

//= require jquery
//= require tether

Po prostu upewnij się, że masz zainstalowany tether


0

Metoda nr 1 : Pobierz stąd i wstaw ją do swoich projektów lub
Metoda nr 2 : użyj poniższego kodu przed źródłem skryptu bootstrap:

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

0

Polecam postępować zgodnie z instrukcjami w dokumentacji Bootstrap 4 :

Skopiuj i wklej arkusz stylów <link>do swojego <head>przed wszystkimi innymi arkuszami stylów, aby załadować nasz 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">

Dodaj nasze wtyczki JavaScript, jQuery i Tether pod koniec swoich stron, tuż przed zamykającym tagiem. Pamiętaj, aby najpierw umieścić jQuery i Tether, ponieważ nasz kod od nich zależy. Chociaż w naszych dokumentach używamy smukłej wersji jQuery, obsługiwana jest również pełna wersja.

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

0

Rozwiązanie UMD / AMD

Dla tych gości, którzy robią to przez UMD i kompilują przezrequire.js , jest lakoniczne rozwiązanie.

W module, który wymaga tetherjako zależności, która ładuje się Tooltipjako UMD, przed definicją modułu, wystarczy umieścić krótki fragment definicji 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
    */
    //...
});

Ten krótki fragment na samym początku, właściwie może być umieszczony na dowolnym wyższym poziomie aplikacji, najważniejsze - aby wywołać go przed faktycznym użyciem bootstrapkomponentów z Tetherzależnościami.

// ===== 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: W Boostrap 4.1 Stable zastąpili Tether przez Popper.js , zobacz dokumentację użycia .


-2

Miałem ten sam problem i rozwiązałem go, dołączając jquery-3.1.1.min przed dołączeniem js i działało to jak urok. Mam nadzieję, że to pomoże.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.