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


176

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.


Salut, pouvez-vous publier le code que vous utilisez? serait mieux si vous pouviez mettre le code dans jsfiddle ou ailleurs.
kucing_terbang

Il n'y a pas de vrai code à publier mais si vous visitez www.atlasestateagents.co.uk et affichez la console, vous verrez l'erreur javascript?
Michael LB

J'ai utilisé ces lignes de code exactes et ils ont supprimé l'erreur pour moi dans la V3, pour quiconque se posait des questions sur cette version.
William le

@MichaelLB, au lieu d'un lien vers votre site Web, je vous recommande de mettre quelques extraits de code ici, dans la question elle-même, si votre site Web sera mis à jour et perdra l'actualité.
Farside

Réponses:


239

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/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
Fixé, merci! Cependant, corriger cela conduit à un nouvel avertissement, peut-être pour une nouvelle question? 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

Génial! Je pense que l'erreur que vous obtenez vient de la bootstrap.min.jsbibliothèque. Est-ce qu'il apparaît toujours si vous le commentez. Ouais, je posterais une nouvelle question si Google n'a pas de solution. :)
adilapapaya

Pensez à utiliser npmcdn pour créer des liens vers des packages publiés sur npm, car certaines personnes ont tendance à supprimer les fichiers build / dist de github. https://npmcdn.com/tether@1.2.4/dist/ethttps://npmcdn.com/bootstrap@4.0.0-alpha.2/dist/
eddywashere

2
mais son étrange, v4-alpha.getbootstrap.com ne dit rien à ce sujet
Maksym Semenykhin

Il le fait sur la version aplha.3. J'ai juste eu cette erreur. Je crois que Tether est maintenant téléchargé sous forme de package et n'est plus inclus. Vous devrez donc également inclure ce script.
Tim Vermaelen

19

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


Est-ce tout ce dont vous avez besoin. Je fais ça et ça ne marche pas.
Henry

9
Comme je l'ai mentionné sur le problème Github, les nouvelles versions de Bootstrap (par exemple 4.0.0-alpha.6) recherchent maintenant "Tether" au lieu de "window.Tether".
ThePadawan

18

Si vous utilisez npm et browserify:

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

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

14

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

1
alors que proposez-vous, pour couper ces lignes? pas bon, car vous ne devriez pas modifier les fournisseurs et les bibliothèques tierces , cela vous empêchera de faire des mises à jour plus tard. Si vous n'utilisez pas ces composants Bootstrap comme vous le dites - pourquoi auriez-vous besoin de Tether ... donc je ne comprends pas vraiment la valeur de votre entrée.
Farside

1
L'avertissement Tether s'affiche même si vous n'utilisez pas la fonctionnalité d'amorçage qui nécessite Tether. Ma solution cache un message gênant dans la console.
Cezary Daniel Nowak

2
Et ce changement ne met pas à jour les scripts tiers ou fournisseur. Vous pouvez l'ajouter ci-dessus <script src = "bootstrap.js">
Cezary Daniel Nowak

Je ne vous comprends pas vraiment, pourquoi pas une seule ligne alors, pareillement window.Tether = window.Tether || {};? De plus, il y a une mise en garde dans votre solution, qu'elle peut effacer une dépendance déjà définie dans une portée globale, si le module sera chargé avant que votre chose ne soit exécutée.
Farside

5
Ceci est un hack pour une version alpha de Bootstrap. Je ne vois pas de raison d'être pointilleux :-) Si le développeur ne veut pas utiliser Tether, effacer une dépendance déjà définie n'est pas un cas. Et à mon avis, window.Tether = window.Tether || {};c'est pire parce qu'il jettera Tether is not a function, au lieu d'une erreur significative.
Cezary Daniel Nowak

10

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>

Cela a bien fonctionné pour moi ... dans mon cas, j'utilise angular avec bootstrap. Merci!
MizAkita

A fonctionné, j'ai ajouté la même chose dans mon fichier, cela fonctionne bien maintenant. Merci pour cette idée. window.Tether = {}; define(['tether'], function (Tether) { return window.Tether = Tether; });
Ehsan Aghaei

8

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
  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 de rails.


7

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/bootstrap@4.0.0-alpha.2/js/bootstrap.js"></script>

2
ou bower comme çabower install tether --save-dev
Farside

13
Ne devrait-il pas être à la npm install tether --saveplace de --save-dev? Il sera également nécessaire en production.
siannone

7

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

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

5

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


3

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

Merci qui a fonctionné, je vous suggère de modifier votre réponse pour supprimer la ligne inutiliséetether: 'tether',
ghiscoding

Vous avez raison, mais à titre d'exemple, je pense que cela illustre le fait qu'une dénomination exacte est requise.
Henry

2

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.


2

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

Assez seulement trois: ... nouveau webpack.ProvidePlugin ({$: 'jquery', jQuery: 'jquery', Tether: 'tether'}), ...
Mentor

1

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

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

1

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

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

1

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

Cela m'a vraiment aidé. J'étais coincé là-dessus pendant des siècles - je ne savais pas que vous pouviez imbriquer les appels requis. Un vote favorable pour vous, monsieur.
grimdog_john

1

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

0

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

0

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

0

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


0

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/tether@1.2.4/dist/js/tether.min.js"></script>

0

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>

0

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 .


-2

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.