Comment réparer l'erreur; 'Erreur: Bootstrap info-bulles besoin d'Attache (http://github.hubspot.com/tether/)'

Je suis en utilisant Bootstrap V4 et le message d'erreur suivant est enregistré dans la console;

Erreur: Bootstrap info-bulles besoin d'Attache
(http://github.hubspot.com/tether/)

J'ai essayé de supprimer l'erreur par l'installation de la courroie d'Ancrage, mais il n'a pas fonctionné. J'ai installé' Attache 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é' attache correctement?

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

Si vous souhaitez afficher le message d'erreur sur mon site, veuillez cliquez sur ici et de charger votre console.

Salut, pouvez-vous poster le code que vous utilisez? serait mieux si vous pouvez mettre le code dans jsfiddle ou quelque part d'autre.
Il n'existe pas de code pour l'afficher, mais si vous visitez www.atlasestateagents.co.uk et la vue de la console, vous verrez l'erreur javascript?
J'ai utilisé ces lignes de code et ils ont enlevé l'erreur pour moi en V3, pour qui s'interrogent sur cette version.
au lieu d'un lien vers votre site web, je vous recommande de mettre un peu de code-extraits ici, dans la question elle-même, c'est votre site internet sera mis à jour, et il va perdre de l'actualité.
La Solution de stackoverflow.com/questions/47431612/...

InformationsquelleAutor Michael LB | 2016-01-02

232

Pour Bootstrap 4 stable:

Depuis la beta Bootstrap 4 ne dépend pas d'Attache, mais Popper.js. Tous les scripts (doit ê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 la la documentation pour le nouveau script versions.

Seulement Bootstrap 4 alpha:

Bootstrap 4 alpha besoins Attache, si vous avez besoin d'inclure tether.min.js avant vous 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>
```
- Corrigé, merci! Cependant, la fixation de la conduire à 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'
- Super! I pense l'erreur que vous obtenez est à venir à partir de la bootstrap.min.js de la bibliothèque. Faut-il encore s'afficher si vous en commentaire. Ouais, j'avais poster une nouvelle question si Google n'est pas une solution. 🙂
- Pensez à utiliser npmcdn faire un lien vers les packages publiés sur la ngp, que certaines personnes ont tendance à enlever l'habillage/dist fichiers à partir de github. https://npmcdn.com/[email protected]/dist/ et https://npmcdn.com/[email protected]/dist/
- mais son étrange , v4-alpha.getbootstrap.com n'a pas dit quoi que ce soit à ce sujet
- Il n'sur la version aplha.3. Juste eu cette erreur. Je crois d'attache est maintenant téléchargé comme un paquet et ne comprenait plus. Donc vous devrez inclure ce script aswell.
- Pourquoi ne pas simplement le bundle avec le téléchargement? Serait-ce trop de sens?
InformationsquelleAutor adilapapaya
19

Si vous utilisez Webpack:
1. Configurer bootstrap loader tel que décrit dans les documents;
2. Installer tether.js via npm;
3. Ajouter tether.js pour le webpack ProvidePlugin plugin.
webpack.config.js:
```
plugins: [
        <... your plugins here>,
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            "window.Tether": 'tether'
        })
    ]
```
Source
- Est-ce tout ce dont vous avez besoin. Je fais cela et sa ne fonctionne pas.
- Comme je l'ai mentionné sur le Github question, les nouvelles versions de Bootstrap (par exemple 4.0.0-alpha.6) sont maintenant à la recherche de "Attache" au lieu de "fenêtre.D'attache".
InformationsquelleAutor Snowman

Si vous utilisez mnp et browserify:

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

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

InformationsquelleAutor Jannic Beck

14

Personnellement, j'utilise des petites sous-ensemble de Bootstrap fonctionnalité et n'ont pas besoin d'attacher la courroie d'Ancrage.

Cela devrait vous aider:
```
window.Tether = function () {
  throw new Error('Your Bootstrap may actually need Tether.');
};
```
- alors, que faites-vous de proposer, de couper ces lignes? pas bon, que vous ne devez pas modifier les fournisseurs et troisième partie libs, ça vous évitera de faire des mises à jour plus tard. Si vous n'utilisez pas ces Bootstrap composants comme vous le dites - pourquoi auriez-vous besoin d'Attache... donc je ne suis pas vraiment comprendre la valeur de votre entrée.
- Attache avertissement est de montrer, même si vous n'avez pas utiliser bootstrap fonctionnalité qui nécessite d'Attache. Ma solution se cache ennuyeux message dans la console.
- Et ce changement n'est pas mise à jour 3rdparty ou fournisseur de scripts. Vous pouvez l'ajouter au-dessus de <script src="bootstrap.js">
- Je ne comprends pas vraiment vous, pourquoi ne pas simplement one-liner puis, comme window.Tether = window.Tether || {};? De Plus, il y a mise en garde dans votre solution, qu'il peut essuyer déjà défini dépendance dans un contexte global, si le module doit être chargé avant votre truc est exécutée.
- Ce hack est pour une version alpha de Bootstrap. Je ne vois pas de raison de faire la fine bouche 🙂 Si un développeur ne souhaitez pas utiliser la sangle d'Attache, en essuyant déjà défini la dépendance n'est pas un cas. Et à mon avis window.Tether = window.Tether || {}; est pire parce qu'il va jeter Tether is not a function, au lieu de significatif d'erreur.
InformationsquelleAutor Cezary Daniel Nowak
10

Si vous voulez éviter le message d'erreur et vous n'êtes pas en utilisant Bootstrap outil de conseils, vous pouvez définir la fenêtre.Sangle d'ancrage avant le chargement de Bootstrap.
```
<script>
  window.Tether = {};
</script>
<script src="js/bootstrap.min.js"></script>
```
- Cela a bien fonctionné pour moi... dans mon cas, je suis en utilisant angulaire avec bootstrap. Merci!
- Travaillé, j'ai ajouté de même dans mon fichier, ça fonctionne maintenant. Merci pour cette Idée. window.Tether = {}; define(['tether'], function (Tether) { return window.Tether = Tether; });
InformationsquelleAutor Donald Rich
8

Vous devriez faire ma ligne directrice:

1. Ajouter soufflet source dans le Gemfile
```
source 'https://rails-assets.org' do
  gem 'rails-assets-tether', '>= 1.1.0'
end
```
1. Commande exécuter:
  
  bundle install
2. Ajouter cette ligne après jQuery dans application.js.
  
  //= besoin de jquery
  
  //= nécessitent attache
3. Redémarrage serveur rails.
InformationsquelleAutor Quy Le
7

Installer attache via npm comme ci-dessous
```
npm install tether --save-dev
```
puis ajouter attache à 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>
```
- ou bower comme ceci bower install tether --save-dev
- Ne devrait-elle pas être npm install tether --save au lieu de --save-dev? Il sera nécessaire également en cours de production.
InformationsquelleAutor cjfarrelly

Pour webpack j'ai résolu ce problème avec webpack.config.js:

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

InformationsquelleAutor opmind

5

Une note supplémentaire. Si vous cochez non compressé fichier javascript, vous trouverez la condition:
```
if(window.Tether === undefined) {
     throw new Error('Bootstrap tooltips require Tether (http://github.hubspot.com/tether)')
}
```
De sorte que le message d'erreur contient les informations nécessaires.

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

InformationsquelleAutor Anton Lyhin

À l'aide de webpack j'ai utilisé ce 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/)');
  }

Merci ça a fonctionné, je voudrais vous suggérer de modifier votre réponse à retirer le solde non utilisé de la ligne de tether: 'tether',
Vous avez raison, mais comme un exemple, je pense qu'il illustre le fait que exacte de nommage est nécessaire.

InformationsquelleAutor Henry

2

J'ai eu ce problème avec requirejs en utilisant le plus récent de bootstrap 4 construire. J'ai fini juste définition:
```
<script>
  window.Tether = {};
</script>
```
dans mon html de la balise head de tromper bootstrap de vérifier. J'ai ensuite ajouté un deuxième exiger la déclaration juste avant le exiger que les charges de mon application, et par la suite, mon bootstrap dépendance:
```
require(['tether'], function (Tether) {
  window.Tether = Tether;
});

require([
  "app",
], function(App){
  App.initialize();
});
```
À l'aide de ces deux en tandem et vous devriez avoir aucun problème à l'aide de bootstrap 4 version alpha.

InformationsquelleAutor Throttlehead

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

Seulement trois: ...de nouvelles webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Attache: 'attache' }), ...

InformationsquelleAutor Vladimir

Pour webpack 1 ou 2 avec Bootstrap 4, vous devez

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

InformationsquelleAutor Djalas

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

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

InformationsquelleAutor Ege Ersoz

Si vous utilisez require.js AMD chargeur:

//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'ai été coincé sur depuis bien longtemps - ne réalisez pas que vous pouvez imbriquer les besoin des appels. Upvote pour vous, monsieur.

InformationsquelleAutor Lukas Pierce

1

Pour vous Laravel Mélanger les utilisateurs il fonctionne Bootstrap4, vous devez exécuter
```
npm installer tether --save
```
Puis mise à jour vous resources/assets/js/bootstrap.js à la charge d'Attache et de l'amener à l'objet window.

Ici est ce que le mien ressemble à: (Remarque j'ai également eu à exécuter npm install popper.js --save)
```
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
window.Tether = require('tether');
require('bootstrap');
```
InformationsquelleAutor zeros-and-ones

À ajouter à @adilapapaya de réponse. Pour ember-cli par les utilisateurs, installer tether avec

bower install --save tether

et de l'inclure dans votre ember-cli-build.js fichier avant de bootstrap, comme suit:

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

InformationsquelleAutor wuher

0

Et si vous utilisez le webpack, vous aurez besoin de l'exposer plugin. Dans votre webpack.config.js, ajouter ce chargeur
```
{
   test: require.resolve("tether"),
   loader: "expose?$!expose?Tether"
}
```
InformationsquelleAutor sat
0

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

Assurez-vous d'ajouter besoin de jquery et d'attache à l'intérieur de votre application.js fichier ils doivent être au top comme cette
```
//= require jquery
//= require tether
```
Juste assurez-vous d'avoir d'attache installé

InformationsquelleAutor Ruben Cruz
0

Méthode #1: Télécharger à partir de Ici et insérez-la à vos projets, ou
Méthode #2: utiliser le code ci-dessous avant votre script bootstrap source:
```
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
```
InformationsquelleAutor Hamid

Je recommande en suivant les instructions dans le Bootstrap 4 documentation:

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

Ajouter nos plugins JavaScript, jQuery, et d'Attache à la fin de votre
pages, juste avant la balise de fermeture. Assurez-vous de placer jQuery
et son Attache tout d'abord, que notre code dépend d'eux. Alors que nous utilisons jQuery
slim construire dans nos docs, la version complète est également pris 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>

InformationsquelleAutor CodeBiker

UMD/AMD solution

Pour les gars, qui le font par le biais de UMD, et de compiler via require.js, il y a un laconique solution.

Dans le module, ce qui nécessite tether comme la dépendance, qui charge Tooltip UMD, en face de définition de module, il suffit de mettre court extrait sur la définition de l'Attache:

//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, en fait peut être mis sur n'importe quel niveau supérieur de votre application, la chose la plus importante - de l'invoquer avant l'utilisation réelle de bootstrap composants avec Tether dé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 Bootstrap 4.1 Stable, ils ont remplacé Attache, avec Popper.js, voir la documentation sur l'utilisation de la.

InformationsquelleAutor Farside

-2

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

InformationsquelleAutor Jakamollo

Vous devez vous connecter pour publier un commentaire.

Pour Bootstrap 4 stable:

Seulement Bootstrap 4 alpha:

UMD/AMD solution