Come correggere l'errore; "Errore: le descrizioni dei comandi Bootstrap richiedono Tether (http://github.hubspot.com/tether/)"

Sto usando Bootstrap V4 e il seguente errore è registrato nella console;

Errore: le descrizioni dei comandi Bootstrap richiedono Tether ( http://github.hubspot.com/tether/ )

Ho provato a rimuovere l'errore installando Tether ma non ha funzionato. Ho installato Tether includendo le seguenti righe di codice;

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

Il tether è stato installato correttamente?

Qualcuno può aiutarmi a rimuovere questo errore?

Se si desidera visualizzare l'errore sul mio sito, fare clic qui e caricare la console.

Per Bootstrap 4 stabile:

Poiché beta Bootstrap 4 non dipende da Tether ma da Popper.js . Tutti gli script ( devono essere in questo ordine):

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

Consulta la documentazione corrente per le versioni più recenti dello script.

Solo Bootstrap 4 alpha:

Bootstrap 4 alpha ha bisogno di Tether , quindi è necessario includerlo tether.min.js prima di includerlo bootstrap.min.js, ad es.

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

Se stai usando Webpack:

1. Imposta bootstrap-loader come descritto nei documenti;
2. Installa tether.js tramite npm;
3. Aggiungi tether.js al plug-in ProvidePlugin del webpack.

webpack.config.js:

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

fonte

Se stai usando npm e browserify:

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

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

Personalmente utilizzo un piccolo sottoinsieme della funzionalità Bootstrap e non ho bisogno di collegare Tether.

Questo dovrebbe aiutare:

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

Se si desidera evitare il messaggio di errore e non si utilizzano i suggerimenti dello strumento Bootstrap, è possibile definire window.Tether prima di caricare Bootstrap.

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

Dovresti seguire la mia linea guida:
1. Aggiungi la seguente fonte in Gemfile

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

2. Esegui comando:

   installazione in bundle

3. Aggiungi questa riga dopo jQuery in application.js.

   // = richiedi jquery
   // = richiedi tether

4. Riavvia il server rails.

Installa il cavo tramite npm come di seguito

npm install tether --save-dev

quindi aggiungi tether al tuo html sopra il bootstrap come di seguito

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

Per il webpack ho risolto questo problema con webpack.config.js:

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

Una nota aggiuntiva Se controlli il file javascript non compresso, troverai la condizione:

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

Quindi il messaggio di errore contiene le informazioni richieste.

Puoi scaricare l'archivio da quel link .

Versione non compressa:

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

Usando il webpack ho usato questo in webpack.config.js:

var plugins = [

    ...

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

Sembra Tetherquello che cercava:

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

Stavo riscontrando questo problema con requestjs utilizzando la più recente build boostrap 4. Ho finito per definire:

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

nel mio tag html head per ingannare il controllo di bootstrap. Ho quindi aggiunto una seconda richiesta obbligatoria appena prima della richiesta che carica la mia app e, successivamente, la mia dipendenza bootstrap:

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

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

Usando entrambi questi in tandem e non dovresti avere problemi con l'attuale build alpha bootstrap 4.

Funziona con generator-aspnetcore-spa e 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)
            ...
        ]
};

Per il webpack 1 o 2 con Bootstrap 4 è necessario

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

Se stai usando Brunch, puoi aggiungerlo alla fine di brunch-config.js:

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

Se si utilizza il caricatore AMD request.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']);
});

Per voi utenti di Laravel Mix là fuori che eseguono Bootstrap4, dovrete eseguire

npm installer tether --save

Quindi ti aggiorna resources/assets/js/bootstrap.jsper caricare Tether e portarlo sull'oggetto finestra.

Ecco come appare il mio: (Nota che dovevo anche correre npm install popper.js --save)

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

Da aggiungere alla risposta di @ adilapapaya. Per gli ember-cliutenti in particolare, installare tethercon

bower install --save tether

e poi includilo nel tuo ember-cli-build.jsfile prima di bootstrap, in questo modo:

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

E se si utilizza il webpack, sarà necessario il plugin expose. Nel tuo webpack.config.js, aggiungi questo caricatore

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

Ho avuto lo stesso problema ed è così che l'ho risolto. Sono su binari 5.1.0rc1

Assicurati di aggiungere richiedono jquery e tether all'interno del tuo file application.js che devono essere al top in questo modo

//= require jquery
//= require tether

Assicurati solo di aver installato Tether

Metodo n. 1 : Scarica da qui e inseriscilo nei tuoi progetti, oppure
Metodo n. 2 : utilizza il codice seguente prima della fonte dello script bootstrap:

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

Consiglio di seguire le istruzioni nella documentazione Bootstrap 4 :

Copia e incolla il foglio di stile <link>nel tuo <head>prima di tutti gli altri fogli di stile per caricare il nostro 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">

Aggiungi i nostri plugin JavaScript, jQuery e Tether vicino alla fine delle tue pagine, proprio prima del tag di chiusura. Assicurati di inserire prima jQuery e Tether, poiché il nostro codice dipende da essi. Mentre utilizziamo la build snella di jQuery nei nostri documenti, è supportata anche la versione completa.

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

Soluzione UMD / AMD

Per quei ragazzi, che lo stanno facendo tramite UMD e compilano tramite require.js, c'è una soluzione laconica.

Nel modulo, che richiede tethercome dipendenza, che si carica Tooltipcome UMD, davanti alla definizione del modulo, basta inserire un breve frammento nella definizione di 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
    */
    //...
});

Questo breve frammento all'inizio, in realtà, può essere applicato a qualsiasi livello più alto dell'applicazione, la cosa più importante - per invocarlo prima dell'uso effettivo dei bootstrapcomponenti con Tetherdipendenza.

// ===== 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 hanno sostituito Tether , con Popper.js , consultare la documentazione sull'uso .

Ho avuto lo stesso problema e l'ho risolto includendo jquery-3.1.1.min prima di includere qualsiasi js e ha funzionato come un incantesimo. Spero che sia d'aiuto.