Hata nasıl düzeltilir; 'Hata: Bootstrap araç ipuçları için Tether gerekiyor (http://github.hubspot.com/tether/)'

Bootstrap V4 kullanıyorum ve konsolda aşağıdaki hata günlüğe kaydedilir;

Hata: Bootstrap araç ipuçları için Tether gerekir ( http://github.hubspot.com/tether/ )

Tether yükleyerek hatayı kaldırmayı denedim ama işe yaramadı. Aşağıdaki kod satırlarını ekleyerek Tether 'yükledim';

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

Bağlamayı doğru şekilde kurdum mu?

Birisi bu hatayı kaldırmama yardımcı olabilir mi?

Hatayı sitemde görüntülemek istiyorsanız, lütfen buraya tıklayın ve konsolunuzu yükleyin.

Bootstrap 4 kararlı için:

Beta Bootstrap 4, Tether'e değil Popper.js'ye bağlı . Tüm komut dosyaları ( bu sırada olmalıdır ):

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

En yeni komut dosyası sürümleri için geçerli belgelere bakın .

Sadece Bootstrap 4 alfa:

Bootstrap 4 alfa Tether'e ihtiyaç duyar , bu yüzden dahil tether.min.js etmeden önce eklemeniz gerekir bootstrap.min.js, örn.

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

Webpack kullanıyorsanız:

1. Bootstrap-loader'ı dokümanlarda açıklandığı gibi kurun;
2. Ntm yoluyla tether.js dosyasını yükleyin;
3. Tether.js web paketini ProvidePlugin eklentisine ekleyin.

webpack.config.js:

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

Kaynak

Npm ve browserify kullanıyorsanız:

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

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

Şahsen Bootstrap işlevselliğinin küçük bir alt kümesini kullanıyorum ve Tether eklemenize gerek yok.

Bu yardımcı olacaktır:

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

Hata mesajından kaçınmak istiyorsanız ve Bootstrap aracı ipuçlarını kullanmıyorsanız, Bootstrap'i yüklemeden önce pencere tanımlayabilirsiniz.

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

Yönergemi yapmalısınız : 1. Gemfile'a feryat kaynağı ekleyin

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

2. Çalıştır komutu:

   paket yükleme

3. Bu satırı application.js içinde jQuery'den sonra ekleyin.

   // = jquery gerektir
   // = tether gerektir

4. Rails sunucusunu yeniden başlatın.

Bağlamayı aşağıdaki gibi npm ile yükleyin

npm install tether --save-dev

sonra aşağıdaki gibi bootstrap yukarıdaki html ekleyin

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

Webpack için bunu şu şekilde çözdüm webpack.config.js:

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

Ek bir not. Sıkıştırılmamış javascript dosyasını kontrol ederseniz koşulu bulacaksınız:

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

Hata mesajı gerekli bilgileri içerir.

Arşivi bu bağlantıdan indirebilirsiniz .

Sıkıştırılmamış sürüm:

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

Web paketini kullanarak bunu kullandım webpack.config.js:

var plugins = [

    ...

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

Aradığı şey gibiydi Tether:

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

En yeni boostrap 4 yapısını kullanarak requirjs ile bu sorunu yaşıyordum. Sadece tanımladım:

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

benim html kafa etiketi bootstrap'ın kontrolünü kandırmak için. Sonra hemen benim app yükler ve daha sonra benim bootstrap bağımlılığı yüklemeden önce ikinci bir zorunlu ifade ekledi:

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

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

Bunların ikisini birlikte kullanarak ve mevcut bootstrap 4 alfa derlemesini kullanırken sorun yaşamamanız gerekir.

Jeneratör-aspnetcore-spa ve bootstrap için çalışır 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)
            ...
        ]
};

Bootstrap 4 içeren webpack 1 veya 2 için ihtiyacınız olan

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

Brunch kullanıyorsanız, bunu aşağıdakilerin sonuna ekleyebilirsiniz brunch-config.js:

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

Requir.js AMD yükleyici kullanıyorsanız:

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

Orada Bootstrap4 çalıştıran Laravel Mix kullanıcıları için,

npm installer tether --save

Ardından resources/assets/js/bootstrap.jsTether'i yüklemek ve pencere nesnesine getirmek için sizi güncelleyin .

İşte benimki gibi: (Ben de koşmak zorundaydım npm install popper.js --save)

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

@ Adilapapaya'nın cevabına eklemek için. İçin ember-cliözel olarak kullanıcılar, yüklemek tetherile

bower install --save tether

ve daha sonra ember-cli-build.jsönyüklemeden önce dosyanıza ekleyin :

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

Ve webpack kullanıyorsanız, maruz kalma eklentisine ihtiyacınız olacak. Webpack.config.js dosyasına bu yükleyiciyi ekleyin

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

Aynı sorunu yaşadım ve bu şekilde çözdüm. 5.1.0rc1 rayındayım

Application.js dosyanızın içine jquery ve tether gerektirdiğinden emin olun, bunun en üstte olması gerekir

//= require jquery
//= require tether

Bağlantının kurulu olduğundan emin olun

Yöntem # 1 : Buradan indirin ve projelerinize ekleyin veya
Yöntem # 2 : bootstrap komut dosyası kaynağınızdan önce aşağıdaki kodu kullanın:

<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>

Bootstrap 4 belgelerindeki talimatları izlemenizi öneririz :

-Kopyala yapıştır stil <link>senin içine <head>diğer tüm stil bizim CSS yüklemek için önce.

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

JavaScript eklentilerimizi, jQuery ve Tether'i, kapanış etiketinin hemen önüne, sayfalarınızın sonuna yakın bir yere ekleyin. Kodumuz bunlara bağlı olduğundan, önce jQuery ve Tether'i yerleştirdiğinizden emin olun. Dokümanlarımızda jQuery'nin ince yapısını kullanırken, tam sürüm de desteklenmektedir.

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

UMD / AMD çözümü

UMD üzerinden yapan ve derleme yapanrequire.js için laconic bir çözüm var.

Modül tanımının önüne UMD olarak tetheryüklenen bağımlılık gerektiren modülde, TooltipTether tanımına kısa bir snippet koyun:

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

Başlangıçta bu kısa snippet, aslında uygulamanızın daha yüksek bir seviyesine, en önemli şeye konabilir - bağımlılığı olan bootstrapbileşenlerin gerçek kullanımından önce çağırmak 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']       
}

UDP: In Boostrap onlar yerini 4.1 Kararlı Tether ile Popper.js , bkz kullanıma belgelere .

Aynı sorunu vardı ve herhangi bir js dahil önce jquery-3.1.1.min dahil ederek çözüldü ve bir cazibe gibi çalıştı. Umarım yardımcı olur.