it-swarm.com.de

Wie behebt man den Fehler? 'Fehler: Bootstrap-Tooltips erfordern Tether (http://github.hubspot.com/tether/)'

Ich verwende Bootstrap V4 und der folgende Fehler wird in der Konsole protokolliert.

Fehler: Bootstrap-QuickInfos erfordern Tether ( http://github.hubspot.com/tether/ )

Ich habe versucht, den Fehler durch die Installation von Tether zu entfernen, aber es hat nicht funktioniert. Ich habe Tether mit den folgenden Codezeilen "installiert".

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

Habe ich die Leine richtig installiert?

Kann mir jemand helfen, diesen Fehler zu entfernen?

Wenn Sie den Fehler auf meiner Website anzeigen möchten, klicken Sie auf here und laden Sie Ihre Konsole.

171
Michael LB

Für Bootstrap 4 stabil:

Da Beta Bootstrap 4 nicht von Tether abhängt, sondern von Popper.js. Alle Skripte (muss in dieser Reihenfolge sein):

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

In der aktuellen Dokumentation finden Sie die neuesten Skriptversionen.


Nur Bootstrap 4 alpha:

Bootstrap 4 alpha benötigt Tether , daher müssen Sie tether.min.jsvor und bootstrap.min.js angeben, z.

<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/js/bootstrap.min.js"></script>
228
adilapapaya

Wenn Sie Webpack verwenden:

  1. Richten Sie den Bootstrap-Loader wie in docs beschrieben ein. 
  2. Installieren Sie tether.js über npm.
  3. Fügen Sie dem Webpack-Plugin "ProvidePlugin" tether.js hinzu.

webpack.config.js:

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

Quelle

19
Snowman

Wenn Sie npm verwenden und browserify:

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

// require
global.Tether = require('tether');
18
Jannic Beck

Persönlich verwende ich einen kleinen Teil der Bootstrap-Funktionalität und muss keinen Tether anschließen.

Das sollte helfen:

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

Wenn Sie die Fehlermeldung vermeiden möchten und keine Bootstrap-Tooltipps verwenden, können Sie window definieren. Vor dem Laden von Bootstrap.

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

Du solltest meine Leitlinie machen:
1. Füge unten die Quelle in Gemfile hinzu

source 'https://Rails-assets.org' do
  gem 'Rails-assets-tether', '>= 1.1.0'
end
  1. Führen Sie den Befehl aus: 

    bundle installieren

  2. Fügen Sie diese Zeile nach jQuery in application.js hinzu.

    // = Jquery erforderlich
    // = Legt fest

  3. Starten Sie den Rails-Server neu.

8
Quy Le

Installieren Sie das Kabel über npm wie unten 

npm install tether --save-dev

dann fügen Sie Ihrer html oberhalb von bootstrap wie unten

<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="jspm_packages/github/twbs/[email protected]/js/bootstrap.js"></script>
7
cjfarrelly

für webpack habe ich das mit (webpack.config.js) gelöst:

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

Eine zusätzliche Notiz. Wenn Sie die nicht komprimierte Javascript-Datei überprüfen, finden Sie die Bedingung:

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

Die Fehlermeldung enthält also die erforderlichen Informationen. 

Sie können das Archiv von diesem link herunterladen.

Unkomprimierte Version: 

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

5
Anton Lyhin

Mit Webpack habe ich dies in webpack.config.js verwendet:

var plugins = [

    ...

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

Es scheint so, als wäre Tether derjenige, nach dem er gesucht hat:

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

Ich hatte dieses Problem mit Requireds, die den neuesten boostrap 4-Build verwendeten. Am Ende habe ich nur definiert:

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

in meinem HTML-Head-Tag, um die Überprüfung von Bootstraps zu täuschen. Ich fügte dann eine zweite Anforderung hinzu, kurz bevor die Anforderung meine App lädt, und anschließend meine Bootstrap-Abhängigkeit:

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

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

Wenn Sie beide gleichzeitig verwenden, sollten Sie kein Problem mit dem aktuellen Bootstrap 4 Alpha Build haben.

2
Throttlehead

Funktioniert für Generator-Aspnetcore-Spa und 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)
            ...
        ]
};
2
Vladimir

Für Webpack 1 oder 2 mit Bootstrap 4 benötigen Sie

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

Wenn Sie Brunch verwenden, können Sie dies am Ende Ihres brunch-config.js hinzufügen:

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

Wenn Sie den erfordern.js AMD Loader verwenden:

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

Ich empfehle, die Anweisungen in der Bootstrap 4-Dokumentation zu befolgen :

Kopieren Sie das Stylesheet <link> in Ihren <head> vor allen anderen Stylesheets zum Laden unserer 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">

Fügen Sie unsere JavaScript-Plugins, jQuery und Tether am Ende Ihres .__ hinzu. Seiten vor dem schließenden Tag. Stellen Sie sicher, dass Sie jQuery .__ angeben. und Tether zuerst, da unser Code von ihnen abhängt. Während wir jQuery verwenden schlank in unseren Dokumenten, wird auch die Vollversion unterstützt.

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

Und wenn Sie Webpack verwenden, benötigen Sie das Expose-Plugin. Fügen Sie in Ihrer webpack.config.js diesen Loader hinzu

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

Hinzufügen zu @ adilapapayas Antwort. Für ember-cli-Benutzer speziell tether mit installieren 

bower install --save tether

und füge es dann vor dem bootstrap in deine ember-cli-build.js-Datei ein:

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

UMD/AMD-Lösung

Für die Leute, die es mit UMD tun und über require.js kompilieren, gibt es eine lakonische Lösung.

In dem Modul, das tether als Abhängigkeit benötigt, und das Tooltip als UMD vor der Moduldefinition lädt, geben Sie einfach einen kurzen Ausschnitt aus der Definition von 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
    */
    //...
});

Dieses kurze Snippet zu Beginn kann tatsächlich auf eine höhere Ebene Ihrer Anwendung gesetzt werden, das Wichtigste - es vor der tatsächlichen Verwendung von bootstrap-Komponenten mit Tether-Abhängigkeit aufzurufen.

// ===== 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: In Boostrap 4.1 Stable wurde Tether durch Popper.js ersetzt, siehe die Dokumentation zur Verwendung .

0
Farside

Ich hatte das gleiche Problem und so habe ich es gelöst ... Ich bin auf Rails 5.1.0rc1 

Vergewissern Sie sich, dass Sie in Ihrer application.js -Datei die erforderlichen Jquery- und Tether-Elemente hinzugefügt haben. Diese müssen ganz oben stehen

//= require jquery
//= require tether

Stellen Sie einfach sicher, dass der Haltegurt installiert ist

0
Ruben Cruz

Methode # 1: Download von Here und in Ihre Projekte einfügen, oder
Methode # 2: Verwenden Sie den folgenden Code vor der Bootstrap-Skriptquelle:

<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
0
Hamid

Für Sie, die Laravel Mix-Benutzer mit Bootstrap4 laufen, müssen Sie sie ausführen 

npm installer tether --save

Aktualisieren Sie dann resources/assets/js/bootstrap.js, um Tether zu laden und zum Fensterobjekt zu bringen.

So sieht meins aus: (Hinweis, dass ich auch npm install popper.js --save ausführen musste)

window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
window.Tether = require('tether');
require('bootstrap');
0
zeros-and-ones