92 views

Hoe de fout op te lossen; ‘Fout: Bootstrap-tooltips vereisen Tether (http://github.hubspot.com/tether/)’

Hosted by Code Expert
javascript

Ik gebruik Bootstrap V4 en de volgende fout is vastgelegd in de console;

Fout: Bootstrap-tooltips vereisen Tether
(http://github.hubspot.com/tether/)

Ik heb geprobeerd de fout te verwijderen door Tether te installeren, maar het is niet gelukt. Ik heb Tether ‘geïnstalleerd’ door de volgende regels code toe te voegen;

<link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css">
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>

Heb ik tether correct ‘geïnstalleerd’?

Kan iemand me helpen deze fout te verwijderen?

Als u de fout op mijn site wilt bekijken, klikt u hieren laadt u uw console.

Antwoord 1, autoriteit 100%

Voor Bootstrap 4 stabiel:

Sinds bèta is Bootstrap 4 niet afhankelijk van Tether, maar van Popper.js. Alle scripts (moetenin deze volgorde):

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

Bekijk de huidige documentatievoor de nieuwste scriptversies.

Alleen Bootstrap 4 alpha:

Bootstrap 4 Alpha behoeften tether , dus u moet tether.min.jsvóór U opnemen bootstrap.min.js, bijv. 

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

Antwoord 2, Autoriteit 8%

Als u webpack gebruikt:

  1. Stel bootstrap-loader in zoals beschreven in documenten;
  2. installeer tether.js via NPM;
  3. voegt Tether.js toe aan de webpack-verstopte plugin-plug-in.

webpack.config.js: 

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

bron

Antwoord 3, Autoriteit 7%

Als u NPM en browserify gebruikt: 

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

Antwoord 4, Autoriteit 6%

Persoonlijk gebruik ik kleine subset van bootstrap-functionaliteit en hoef niet te bevestigen.

Dit zou moeten helpen: 

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

Antwoord 5, Autoriteit 5%

Als u het foutbericht wilt vermijden en gebruikt u geen Tips van Bootstrap, kunt u venster.tether definiëren voordat u bootstrap wordt geladen. 

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

Antwoord 6, Autoriteit 3%

U moet mijn richtsnoer gedaan:
1. Voeg bele-bron toe aan gemfile 

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

  1. RUN-opdracht:

    Bundel installeren

  2. Voeg deze regel toe na jQuery in applicatie.js.

    // = vereisen jQuery
    // = vereisen tether

  3. Restart Rails Server.

Antwoord 7, Autoriteit 3%

Installeer de tether via NPM zoals hieronder 

npm install tether --save-dev

Voeg vervolgens TETHER toe aan uw HTML boven bootstrap zoals hieronder 

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

Antwoord 8, Autoriteit 3%

Voor Webpack Ik heb dit opgelost met webpack.config.js: 

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

Antwoord 9, Autoriteit 2%

een extra noot. Als u het niet-gecomprimeerde JavaScript-bestand controleert, vindt u de voorwaarde: 

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

Dus het foutbericht bevat de vereiste informatie.

U kunt het archief van die koppeling downloaden.

Niet-gecomprimeerde versie:

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

Antwoord 10

Webpack gebruiken Ik heb dit gebruikt in webpack.config.js: 

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

Het lijkt als Tetherwas degene die op zoek was: 

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

Antwoord 11

Ik had dit probleem met versluitingen met behulp van de nieuwste Boostrap 4-build. Ik eindigde gewoon het definiëren: 

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

in mijn html-headtag om de controle van bootstrap voor de gek te houden. Ik heb toen een tweede eis toegevoegd net voor de eis die mijn app laadt, en vervolgens mijn bootstrap-afhankelijkheid:

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

Als je deze beide tegelijk gebruikt, zou het geen probleem moeten zijn om de huidige bootstrap 4 alpha build te gebruiken.

Antwoord 12

Werkt voor generator-aspnetcore-spa en 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)
            ...
        ]
};

Antwoord 13

Voor webpack 1 of 2 met Bootstrap 4 heb je nodig

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

Antwoord 14

Als je Brunch gebruikt, kun je dit toevoegen aan het einde van je brunch-config.js:

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

Antwoord 15

Als u nodig hebt. SS AMD Loader: 

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

Antwoord 16

Voor u Laravel Mix-gebruikers die hier worden uitgevoerd Bootstrap4, moet u

uitvoeren

npm installer tether --save

Update vervolgens resources/assets/js/bootstrap.jsom TETHER te laden en deze naar het vensterobject te brengen.

Hier is wat de mijne eruit ziet: (Opmerking Ik moest ook worden uitgevoerd npm install popper.js --save) 

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

Antwoord 17

Om toe te voegen aan het antwoord van @ Adilapaya. Voor ember-cliGebruikers specifiek, installeer Tethermet 

bower install --save tether

en neem het op in uw ember-cli-build.jsbestand vóór bootstrap, zoals SO: 

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

Antwoord 18

en als u WEBPACK gebruikt, heeft u de blootstelling aan de hoogte nodig. Voeg deze lader

toe in uw webpack.config.js

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

Antwoord 19

Ik had hetzelfde probleem en dit is hoe ik het heb opgelost.
Ik ben op rails 5.1.0rc1

Zorg ervoor dat u wilt toevoegen Vereist JQuery en Tether in uw applicatie.js-bestand moeten ze zo hoog zijn als deze 

//= require jquery
//= require tether

Zorg er gewoon voor dat u Tether hebt geïnstalleerd

Antwoord 20

Method # 1 : Download van hier en plaats het aan uw projecten, of
Methode # 2 : Gebruik onderstaande code vóór uw Bootstrap-script Bron: 

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

Antwoord 21

Ik raad aan de instructies in de bootstrap 4 documentatie :

Copy-Pure the Stylesheet <link>IN UW <head>VOOR ALLE
Stylesheets om onze CSS te laden. 

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

Voeg onze JavaScript-plug-ins, jQuery en Tether toe aan het einde van uw
pagina’s, vlak voor de afsluitende tag. Plaats zeker jQuery
en Tether eerst, omdat onze code ervan afhangt. Terwijl we jQuery’s gebruiken
slim gebouwd in onze documenten, de volledige versie wordt ook ondersteund.

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

Antwoord 22

UMD/AMD-oplossing

Voor degenen die het via UMDdoen en via require.jscompileren, is er een laconieke oplossing.

In de module, die Tethervereist als de afhankelijkheid, die Tooltiplaadt als UMD, voor de moduledefinitie, plaats je gewoon een kort fragment over de definitie van 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
    */
    //...
});

Dit korte fragment aan het begin, kan eigenlijk op elk hoger niveau van uw applicatie worden geplaatst, het belangrijkste is – om het op te roepen voordat u de bootstrap-componenten daadwerkelijk gebruikt met Tetherafhankelijkheid.

// ===== 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 hebben ze Tethervervangen door Popper.js, zie de documentatie over gebruik.

Antwoord 23

Ik had hetzelfde probleem en ik loste het op door jQuery-3.1.1.min op te nemen voordat js werd toegevoegd en het werkte als een charme. Ik hoop dat het helpt.

Previous articleHoe verwijder ik een sleutel uit een JavaScript-object?
Next articleHoe test ik een privéfunctie of een klasse met privé-methoden, velden of binnenklassen?

Other episodes

Is een functie die Math.random() puur aanroept?

javascript Code Expert - 0
Is het volgende een pure functie? function test(min,max) { return Math.random() * (max - min) + min; } Ik heb begrepen dat een pure...
Read more

Ik wil een tekst of regel met ellips afkappen met JavaScript

javascript Code Expert - 0
Ik ben op zoek naar een eenvoudig script dat een string kan afkappen met ellips (...) Ik wil iets als 'this is a very long...
Read more

firebase.firestore() is geen functie bij het initialiseren van Cloud Firestore

javascript Code Expert - 0
Toen ik Firebase Cloud Firestore probeerde te initialiseren, kwam ik de volgende fout tegen: Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0_firebase.firestore is geen functie Ik heb eerder firebase...
Read more

Hoe krijg ik een hoogte van een toetsenbord in React-Native?

javascript Code Expert - 0
Ik gebruik React-Navigation in mijn app en de app bestaat uit StackNavigator met meerdere schermen, waarvan sommige schermen TextInput hebben met autoFocus={true} Probleem:op deze schermen...
Read more

ReferenceError: prestatie is niet gedefinieerd bij gebruik van performance.now()

javascript Code Expert - 0
Ik krijg een foutmelding ReferenceError: performance is not definedwanneer ik performance.now()om de uitvoeringstijd van een functieaanroep te meten: export async function find(someId: string, ctx: context.IContext)...
Read more

Herhaal een reeks objecten in Typescript

javascript Code Expert - 0
Ik moet de reeks objecten in hoek 2 herhalen en de weergave van de tekenreekslengte voor een bepaalde sleutel in het object beperken. this.productService.loadAllProducts(product).subscribe(data =>...
Read more

Zet lengtebeperking in een TextField in react js

javascript Code Expert - 0
Ik neem een ​​invoer van de gebruiker van het kaartnummer en wil dat de lengte die door de gebruiker wordt ingevoerd niet kleiner en...
Read more

© Copyright - Code Expert 2021