web-dev-qa-db-fra.com

Comment corriger l'erreur? "Erreur: les info-bulles d'amorçage nécessitent Tether (http://github.hubspot.com/tether/)"

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

Erreur: les infobulles d’initialisation 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é' correctement?

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

Si vous souhaitez voir l'erreur sur mon site, cliquez sur ici et chargez votre console.

javascripttwitter-bootstrapbootstrap-4tether
171
Michael LB

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>

Voir le documentation en cours pour les dernières versions de script.

Seulement Bootstrap 4 alpha:

Bootstrap 4 alpha nécessite Tether _, vous devez donc inclure tether.min.jsavant que vous incluez 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>
228
adilapapaya

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 plug-in Webpack ProvidePlugin.

webpack.config.js:

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

La source

19
Snowman

Si vous utilisez npm et browserify:

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

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

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

Cela devrait aider:

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

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>
8
Donald Rich

Vous devriez faire ma ligne directrice:
1. Ajouter la source ci-dessous dans Gemfile

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

  1. Exécuter la commande: 

    installation groupée

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

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

  3. Redémarrez le serveur Rails.

8
Quy Le

Installez le câble via npm comme ci-dessous 

npm install tether --save-dev

puis ajoutez le lien à votre code 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>
7
cjfarrelly

pour webpack j'ai résolu ceci avec (webpack.config.js):

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

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 les archives à partir de link .

Version non compressée: 

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

5
Anton Lyhin

En utilisant webpack, je l'ai utilisé 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 Tether était celui qu'il cherchait:

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

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

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

dans ma balise de tête html pour tromper la vérification de bootstrap. J'ai ensuite ajouté une deuxième instruction require juste avant que require charge mon application, puis ma dépendance à l'amorçage:

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

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

Si vous utilisez les deux en tandem, vous ne devriez avoir aucun problème à utiliser la version actuelle de bootstrap 4 alpha.

2
Throttlehead

Fonctionne pour generator-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)
            ...
        ]
};
2
Vladimir

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

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

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

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

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

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

Copiez-collez la feuille de style <link> dans votre <head> avant tout autre 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 vers la fin de votre 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 jQuery’s Dans nos docs, 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>
0
CodeBiker

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

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

Pour ajouter à la réponse de @ adilapapaya. Pour les utilisateurs de ember-cli spécifiquement, installez tether avec 

bower install --save tether

puis incluez-le dans votre fichier ember-cli-build.js 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');
0
wuher

Solution UMD/AMD

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

Dans le module, qui requiert tether en tant que dépendance, qui charge Tooltip en tant que UMD, devant la définition du module, il suffit de placer un court extrait de code 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 à appeler - avant de l’utiliser avant l’utilisation réelle des composants bootstrap avec une dépendance 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: Dans Boostrap 4.1 Stable, ils ont remplacé Tether, avec Popper.js , voir la documentation sur l’utilisation .

0
Farside

J'ai eu le même problème et voici comment je l'ai résolu ... Je suis sur Rails 5.1.0rc1 

Assurez-vous d’ajouter require jquery et tether à l’intérieur de votre fichier application.js, ils doivent être au sommet, comme celui-ci.

//= require jquery
//= require tether

Assurez-vous simplement d'avoir la longe installée

0
Ruben Cruz

Méthode n ° 1: Téléchargez de Ici et insérez-le dans vos projets, ou
Method # 2: utilisez le code ci-dessous avant la source du script d'amorçage:

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

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

npm installer tether --save

Ensuite, mettez à jour votre resources/assets/js/bootstrap.js pour charger Tether et l'amener à l'objet window.

Voici à quoi ressemble le mien: (Remarque: je devais aussi exécuter npm install popper.js --save)

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