Comment réparer l'erreur; 'Erreur: les info-bulles Bootstrap nécessitent Tether (http://github.hubspot.com/tether/)'

J'utilise Bootstrap V4 et l'erreur suivante est enregistrée dans la console;

Erreur: les info-bulles Bootstrap nécessitent Tether ( http://github.hubspot.com/tether/ )

J'ai essayé de supprimer l'erreur en installant Tether mais cela n'a pas fonctionné. J'ai «installé» Tether en incluant les lignes de code suivantes;

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

Ai-je «installé» le câble correctement?

Quelqu'un peut-il m'aider à supprimer cette erreur?

Si vous souhaitez voir l'erreur sur mon site, veuillez cliquer ici et charger votre console.

Pour Bootstrap 4 stable:

Depuis la bêta, Bootstrap 4 ne dépend pas de Tether mais de Popper.js . Tous les scripts ( doivent être dans cet ordre):

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

Consultez la documentation actuelle pour les dernières versions de script.

Seulement Bootstrap 4 alpha:

Bootstrap 4 alpha a besoin de Tether , vous devez donc inclure tether.min.js avant d'inclure bootstrap.min.js, par exemple.

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

Si vous utilisez Webpack:

1. Configurez bootstrap-loader comme décrit dans la documentation;
2. Installez tether.js via npm;
3. Ajoutez tether.js au plugin Webpack providePlugin.

webpack.config.js:

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

La source

Si vous utilisez npm et browserify:

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

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

Personnellement, j'utilise un petit sous-ensemble de fonctionnalités Bootstrap et je n'ai pas besoin d'attacher Tether.

Cela devrait aider:

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

Si vous souhaitez éviter le message d'erreur et que vous n'utilisez pas les info-bulles Bootstrap, vous pouvez définir window.Tether avant de charger Bootstrap.

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

Vous devriez
suivre mon guide: 1. Ajouter la source ci-dessous dans Gemfile

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

2. Exécuter la commande:

   installation groupée

3. Ajoutez cette ligne après jQuery dans application.js.

   // = nécessite jquery
   // = nécessite une attache

4. Redémarrez le serveur de rails.

Installez Tether via npm comme ci-dessous

npm install tether --save-dev

puis ajoutez une attache à votre html ci-dessus bootstrap comme ci-dessous

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

Pour webpack, j'ai résolu cela avec webpack.config.js:

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

Une note supplémentaire. Si vous vérifiez le fichier javascript non compressé, vous trouverez la condition:

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

Le message d'erreur contient donc les informations requises.

Vous pouvez télécharger l'archive à partir de ce lien .

Version non compressée:

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

En utilisant webpack, j'ai utilisé ceci dans webpack.config.js:

var plugins = [

    ...

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

Il semble que Tetherc'était celui qu'il recherchait:

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

J'avais ce problème avec requirejs en utilisant la dernière version de boostrap 4. J'ai fini par définir simplement:

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

dans ma balise head html pour tromper le contrôle de bootstrap. J'ai ensuite ajouté une deuxième instruction require juste avant le require qui charge mon application, et par la suite, ma dépendance bootstrap:

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

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

En utilisant les deux en tandem, vous ne devriez avoir aucun problème avec la version alpha actuelle de bootstrap 4.

Fonctionne pour générateur-aspnetcore-spa et 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)
            ...
        ]
};

Pour le webpack 1 ou 2 avec Bootstrap 4, vous avez besoin

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

Si vous utilisez Brunch, vous pouvez l'ajouter à la fin de votre brunch-config.js:

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

Si vous utilisez le chargeur 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']);
});

Pour les utilisateurs de Laravel Mix exécutant Bootstrap4, vous devrez exécuter

npm installer tether --save

Ensuite, mettez-vous resources/assets/js/bootstrap.jsà jour pour charger Tether et l'amener à l'objet de fenêtre.

Voici à quoi ressemble le mien: (Notez que j'ai aussi dû courir npm install popper.js --save)

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

Pour ajouter à la réponse de @ adilapapaya. Pour les ember-cliutilisateurs en particulier, installez tetheravec

bower install --save tether

puis incluez-le dans votre ember-cli-build.jsfichier avant le bootstrap, comme ceci:

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

Et si vous utilisez webpack, vous aurez besoin du plugin exposer. Dans votre webpack.config.js, ajoutez ce chargeur

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

J'ai eu le même problème et c'est ainsi que je l'ai résolu. Je suis sur les rails 5.1.0rc1

Assurez-vous d'ajouter require jquery et tether dans votre fichier application.js, ils doivent être tout en haut comme ceci

//= require jquery
//= require tether

Assurez-vous simplement d'avoir installé le câble

Méthode n ° 1 : Téléchargez à partir d' ici et insérez-le dans vos projets, ou
Méthode n ° 2 : utilisez le code ci-dessous avant votre source de script de démarrage:

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

Je recommande de suivre les instructions de la documentation Bootstrap 4 :

Copiez-collez la feuille de style <link>dans votre <head>avant toutes les autres feuilles de style pour charger notre 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">

Ajoutez nos plugins JavaScript, jQuery et Tether à la fin de vos pages, juste avant la balise de fermeture. Assurez-vous de placer jQuery et Tether en premier, car notre code en dépend. Bien que nous utilisions la version mince de jQuery dans nos documents, la version complète est également prise en charge.

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

Solution UMD / AMD

Pour ceux qui le font via UMD et compilent via require.js, il existe une solution laconique.

Dans le module, qui nécessite tethercomme dépendance, qui se charge en Tooltiptant qu'UMD, devant la définition du module, il suffit de mettre un court extrait sur la définition de 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
    */
    //...
});

Ce court extrait au tout début, peut en fait être placé à n'importe quel niveau supérieur de votre application, la chose la plus importante - pour l'invoquer avant l'utilisation réelle des bootstrapcomposants avec Tetherdépendance.

// ===== 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: Dans Boostrap 4.1 Stable, ils ont remplacé Tether , par Popper.js , voir la documentation sur l'utilisation .

J'ai eu le même problème et je l'ai résolu en incluant jquery-3.1.1.min avant d'inclure des js et cela a fonctionné comme un charme. J'espère que ça aide.