Bagaimana cara memperbaiki kesalahan; 'Kesalahan: Bootstrap tooltips membutuhkan Tether (http://github.hubspot.com/tether/)'


176

Saya menggunakan Bootstrap V4 dan kesalahan berikut dicatat di konsol;

Kesalahan: Bootstrap tooltips memerlukan Tether ( http://github.hubspot.com/tether/ )

Saya telah mencoba untuk menghapus kesalahan dengan menginstal Tether tetapi tidak berhasil. Saya telah 'menginstal' Tether dengan memasukkan baris kode berikut;

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

Sudahkah saya 'memasang' tether dengan benar?

Adakah yang bisa membantu saya menghapus kesalahan ini?

Jika Anda ingin melihat kesalahan di situs saya, silakan klik di sini dan muat konsol Anda.


Hai, bisakah Anda memposting kode yang Anda gunakan? akan lebih baik jika Anda bisa memasukkan kode di jsfiddle atau di tempat lain.
kucing_terbang

Tidak ada kode nyata untuk dikirim tetapi jika Anda mengunjungi www.atlasestateagents.co.uk dan melihat konsol Anda akan melihat kesalahan javascript?
Michael LB

Saya menggunakan baris kode yang tepat ini dan mereka menghapus kesalahan untuk saya di V3, untuk siapa pun yang bertanya-tanya tentang versi itu.
William

@MichaelLB, alih-alih tautan ke situs web Anda, saya sarankan untuk menaruh beberapa cuplikan kode di sini, di dalam pertanyaan itu sendiri, apakah situs web Anda akan diperbarui, dan itu akan kehilangan aktualitas.
Farside

Jawaban:


239

Untuk Bootstrap 4 stable:

Karena beta Bootstrap 4 tidak bergantung pada Tether tetapi Popper.js . Semua skrip ( harus dalam urutan ini):

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

Lihat dokumentasi saat ini untuk versi skrip terbaru.


Hanya Bootstrap 4 alpha:

Bootstrap 4 alpha membutuhkan Tether , jadi Anda harus memasukkan tether.min.js sebelum memasukkan bootstrap.min.js, misalnya.

<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
Diperbaiki, terima kasih! Namun, memperbaiki itu mengarah pada peringatan baru, mungkin untuk pertanyaan baru? 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

Bagus! Saya pikir kesalahan yang Anda dapatkan berasal dari bootstrap.min.jsperpustakaan. Apakah masih muncul jika Anda berkomentar. Ya, saya akan mengirim pertanyaan baru jika Google tidak memiliki solusi. :)
adilapapaya

Pertimbangkan untuk menggunakan npmcdn untuk menautkan ke paket-paket yang diterbitkan pada npm, karena beberapa orang cenderung menghapus file build / dist dari github. https://npmcdn.com/tether@1.2.4/dist/danhttps://npmcdn.com/bootstrap@4.0.0-alpha.2/dist/
eddywashere

2
tapi anehnya, v4-alpha.getbootstrap.com tidak mengatakan apa-apa tentang hal itu
Maksym Semenykhin

Itu pada versi aplha.3. Baru saja mengalami kesalahan ini. Saya percaya tether sekarang diunduh sebagai paket dan tidak termasuk lagi. Jadi, Anda harus menyertakan skrip ini juga.
Tim Vermaelen

19

Jika Anda menggunakan Webpack:

  1. Atur bootstrap-loader seperti yang dijelaskan dalam dokumen;
  2. Instal tether.js melalui npm;
  3. Tambahkan tether.js ke plugin ProvidPlugin webpack.

webpack.config.js:

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

Sumber


Apakah ini yang Anda butuhkan. Saya melakukan ini dan itu tidak berfungsi.
Henry

9
Seperti yang saya sebutkan pada masalah Github, versi Bootstrap yang lebih baru (misal 4.0.0-alpha.6) sekarang mencari "Tether" dan bukannya "window.Tether".
ThePadawan

18

Jika Anda menggunakan npm dan peramban:

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

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

14

Secara pribadi saya menggunakan subset kecil dari fungsionalitas Bootstrap dan tidak perlu melampirkan Tether.

Ini akan membantu:

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

1
jadi apa yang Anda usulkan, untuk memotong garis-garis ini? tidak baik, karena Anda tidak boleh memodifikasi vendor dan lib pihak ketiga , itu akan mencegah Anda melakukan pembaruan nanti. Jika Anda tidak menggunakan komponen Bootstrap ini seperti yang Anda katakan - mengapa Anda membutuhkan Tether ... jadi saya tidak benar-benar memahami nilai input Anda.
Farside

1
Peringatan tether bahkan ditampilkan, jika Anda tidak menggunakan fungsionalitas bootstrap yang membutuhkan Tether. Solusi saya menyembunyikan pesan yang mengganggu di konsol.
Cezary Daniel Nowak

2
Dan perubahan ini tidak memperbarui skrip pihak ketiga atau vendor. Anda dapat menambahkannya di atas <script src = "bootstrap.js">
Cezary Daniel Nowak

Saya tidak begitu mengerti Anda, mengapa tidak hanya satu kalimat saja window.Tether = window.Tether || {};? Plus, ada peringatan dalam solusi Anda, bahwa itu dapat menghapus ketergantungan yang sudah didefinisikan dalam lingkup global, jika modul akan dimuat sebelum hal Anda dieksekusi.
Farside

5
Ini adalah retasan untuk Bootstrap versi alpha. Saya tidak melihat alasan untuk pilih-pilih :-) Jika pengembang tidak ingin menggunakan Tether, menghapus ketergantungan yang sudah ditentukan bukanlah suatu kasus. Dan menurut saya window.Tether = window.Tether || {};lebih buruk karena akan melempar Tether is not a function, bukannya kesalahan yang berarti.
Cezary Daniel Nowak

10

Jika Anda ingin menghindari pesan kesalahan dan Anda tidak menggunakan tips alat Bootstrap, Anda dapat menentukan window.Tether sebelum memuat Bootstrap.

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

Ini bekerja dengan baik untuk saya ... dalam kasus saya, saya menggunakan sudut dengan bootstrap. Terima kasih!
MizAkita

Berhasil, saya menambahkan yang sama di file saya, itu berfungsi dengan baik sekarang. Terima kasih atas Ide ini. window.Tether = {}; define(['tether'], function (Tether) { return window.Tether = Tether; });
Ehsan Aghaei

8

Anda harus melakukan panduan saya:
1. Tambahkan sumber di bawah ini ke dalam Gemfile

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

    bundel instal

  2. Tambahkan baris ini setelah jQuery di application.js.

    // = membutuhkan jquery
    // = membutuhkan tether

  3. Mulai ulang server rel.


7

Instal tether melalui npm seperti di bawah ini

npm install tether --save-dev

kemudian tambahkan tether ke html Anda di atas bootstrap seperti di bawah ini

<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
atau bower seperti inibower install tether --save-dev
Farside

13
Bukankah seharusnya npm install tether --savebukan --save-dev? Itu akan dibutuhkan juga dalam produksi.
siannone

7

Untuk webpack saya menyelesaikan ini dengan webpack.config.js:

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

5

Catatan tambahan. Jika Anda memeriksa file javascript yang tidak dikompresi, Anda akan menemukan kondisinya:

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

Jadi pesan kesalahan berisi informasi yang diperlukan.

Anda dapat mengunduh arsip dari tautan itu .

Versi tidak terkompresi:

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


3

Menggunakan webpack saya menggunakan ini di webpack.config.js:

var plugins = [

    ...

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

Sepertinya Tetheritu yang dicari:

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

Terima kasih itu berhasil, saya sarankan Anda mengedit jawaban Anda untuk menghapus baris yang tidak digunakantether: 'tether',
ghiscoding

Anda benar, tetapi sebagai contoh saya pikir itu menggambarkan fakta bahwa penamaan yang tepat diperlukan.
Henry

2

Saya mengalami masalah ini dengan requirejs menggunakan buildraprap 4 build terbaru. Saya akhirnya hanya mendefinisikan:

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

di tag kepala html saya untuk menipu cek bootstrap. Saya kemudian menambahkan pernyataan membutuhkan kedua sebelum persyaratan yang memuat aplikasi saya, dan kemudian, ketergantungan bootstrap saya:

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

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

Menggunakan kedua hal ini bersama-sama dan Anda seharusnya tidak memiliki masalah menggunakan bootstrap 4 alpha build saat ini.


2

Bekerja untuk generator-aspnetcore-spa dan 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)
            ...
        ]
};

Cukup hanya tiga: ... webpack baru.BersediaPlugin ({$: 'jquery', jQuery: 'jquery', Tether: 'tether'}), ...
Mentor

1

Untuk webpack 1 atau 2 dengan Bootstrap 4 yang Anda butuhkan

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

1

Jika Anda menggunakan Brunch, Anda dapat menambahkan ini di akhir brunch-config.js:

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

1

Jika Anda menggunakan loader AMD need.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']);
});

Ini sangat membantu saya. Saya terjebak dalam hal ini selama berabad-abad - tidak menyadari Anda bisa membuat panggilan. Suara positif untuk Anda, tuan.
grimdog_john

1

Untuk Anda pengguna Laravel Mix di luar sana yang menjalankan Bootstrap4, Anda harus menjalankannya

npm installer tether --save

Kemudian perbarui Anda resources/assets/js/bootstrap.jsuntuk memuat Tether dan membawanya ke objek jendela.

Inilah yang terlihat seperti milik saya: (Catatan saya juga harus menjalankan npm install popper.js --save)

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

0

Untuk menambahkan jawaban @ adilapapaya. Khusus untuk ember-clipengguna, instal tetherdengan

bower install --save tether

dan kemudian memasukkannya ke dalam ember-cli-build.jsfile Anda sebelum bootstrap, seperti:

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

Dan jika menggunakan webpack, Anda akan memerlukan plugin expose. Di webpack.config.js Anda, tambahkan pemuat ini

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

0

Saya memiliki masalah yang sama dan ini adalah bagaimana saya menyelesaikannya. Saya di kereta 5.1.0rc1

Pastikan untuk menambahkan memerlukan jquery dan tether di dalam file application.js Anda, mereka harus di bagian paling atas seperti ini

//= require jquery
//= require tether

Pastikan untuk memasang tether


0

Metode # 1 : Unduh dari sini dan masukkan ke proyek Anda, atau
Metode # 2 : gunakan kode di bawah ini sebelum sumber skrip bootstrap Anda:

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

0

Saya merekomendasikan mengikuti instruksi dalam dokumentasi Bootstrap 4 :

Salin-tempel stylesheet <link>ke Anda <head>sebelum semua stylesheet lainnya untuk memuat CSS kami.

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

Tambahkan plugins JavaScript, jQuery, dan Tether kami di dekat akhir halaman Anda, tepat sebelum tag penutup. Pastikan untuk menempatkan jQuery dan Tether terlebih dahulu, karena kode kami tergantung pada mereka. Sementara kami menggunakan jQuery's slim build di dokumen kami, versi lengkapnya juga didukung.

<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

Solusi UMD / AMD

Bagi mereka yang melakukannya melalui UMD , dan kompilasi viarequire.js , ada solusi singkat.

Dalam modul, yang memerlukan tetherdependensi, yang memuat Tooltipsebagai UMD, di depan definisi modul, cukup masukkan cuplikan singkat tentang definisi 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
    */
    //...
});

Cuplikan singkat ini di awal, sebenarnya dapat diletakkan di tingkat aplikasi Anda yang lebih tinggi, yang paling penting - untuk memohonnya sebelum penggunaan aktual bootstrapkomponen dengan Tetherketergantungan.

// ===== 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: Di Boostrap 4.1 Stable mereka mengganti Tether , dengan Popper.js , lihat dokumentasi tentang penggunaan .


-2

Saya memiliki masalah yang sama dan saya menyelesaikannya dengan memasukkan jquery-3.1.1.min sebelum menyertakan js dan itu bekerja seperti pesona. Semoga ini bisa membantu.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.