エラーを修正する方法。「エラー:ブートストラップツールチップにはテザーが必要です(http://github.hubspot.com/tether/)」


176

Bootstrap V4を使用していますが、次のエラーがコンソールに記録されます。

エラー:ブートストラップツールチップにはテザーが必要です(http://github.hubspot.com/tether/

Tetherをインストールしてエラーを削除しようとしましたが、機能しません。次のコード行を含めることにより、Tetherを「インストール」しました。

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

テザーを正しく「インストール」しましたか?

誰かがこのエラーを削除するのを手伝ってくれる?

あなたが私のサイト上でエラーを表示したい場合は、クリックしてくださいここでは、あなたのコンソールをロードします。


こんにちは、使用するコードを投稿できますか?あなたがjsfiddleまたは他のどこかにコードを置くことができればもっと良いでしょう。
kucing_terbang 2016年

実際に投稿するコードはありませんが、www.atlasestateagents.co.ukにアクセスしてコンソールを表示すると、JavaScriptエラーが表示されますか?
マイケルLB

私はこれらの正確なコード行を使用し、そのバージョンについて疑問に思っている人のために、V3のエラーを削除しました。
William

@MichaelLB、あなたのウェブサイトへのリンクの代わりに、私はここにいくつかのコードスニペットを質問自体の中に置くことをお勧めします、あなたのウェブサイトは更新され、それは実際を失うでしょう。
2016年

回答:


239

Bootstrap 4安定版の場合:

ベータ版のBootstrap 4はTetherではなくPopper.jsに依存しているため。すべてのスクリプト(この順序である必要があります):

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

最新のスクリプトバージョンについては、現在のドキュメントを参照してください。


Bootstrap 4 alphaのみ:

Bootstrap 4 alphaにTetherが必要なので、インクルードtether.min.js する前にインクルードする必要がありますbootstrap.min.js

<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
修正しました、ありがとうございます!しかし、それを修正すると、おそらく新しい質問のために、新しい警告が表示されますか?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

すごい!あなたが得ているエラーはライブラリにあると思いbootstrap.min.jsます。コメントアウトしても表示されますか?ええ、Googleに解決策がない場合は、新しい質問を投稿します。:)
adilapapaya 2016年

npmcdnを使用して、npmで公開されたパッケージにリンクすることを検討してください。githubからbuild / distファイルを削除する傾向がある人もいます。https://npmcdn.com/tether@1.2.4/dist/およびhttps://npmcdn.com/bootstrap@4.0.0-alpha.2/dist/
-eddywashere

2
しかし、奇妙なv4-alpha.getbootstrap.comはそれについて何も述べていません
Maksym Semenykhin

バージョンaplha.3では実行されます。このエラーが発生しました。テザーはパッケージとしてダウンロードされ、もう含まれていないと思います。したがって、このスクリプトも含める必要があります。
Tim Vermaelen

19

Webpackを使用している場合:

  1. ドキュメントで説明されているようにブートストラップローダーを設定します。
  2. npmを介してtether.jsをインストールします。
  3. tether.jsをwebpack ProvidePluginプラグインに追加します。

webpack.config.js:

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

ソース


これで十分です。私はこれを行っていますが、機能していません。
ヘンリー

9
Githubの問題で述べたように、Bootstrapの新しいバージョン(4.0.0-alpha.6など)は、「window.Tether」ではなく「Tether」を探しています。
ThePadawan 2017年

18

npmとbrowserifyを使用している場合:

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

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

14

個人的に私はBootstrap機能の小さなサブセットを使用しており、Tetherをアタッチする必要はありません。

これは役立つはずです:

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

1
これらの線を切るために何を提案しますか?ベンダーサードパーティのライブラリを変更してはならないため、後で更新することはできません。あなたが言うようにこれらのBootstrapコンポーネントを使用しない場合-なぜTetherが必要なのか...入力の価値を本当に理解していません。
Farside

1
テザーを必要とするブートストラップ機能を使用しない場合でも、テザー警告が表示されます。私の解決策は、コンソールに迷惑なメッセージを隠します。
Cezary Daniel Nowak

2
そして、この変更はサードパーティまたはベンダーのスクリプトを更新していません。<script src = "bootstrap.js">の上に追加できます
Cezary Daniel Nowak

私は本当にあなたのことを理解していません。なぜ、ワンライナーだけでなく、なぜwindow.Tether = window.Tether || {};ですか?さらに、ソリューションに注意が必要です。実行前にモジュールがロードされる場合、グローバルスコープで既に定義されている依存関係を消去する可能性があります。
Farside

5
これは、Bootstrapのアルファ版のハックです。うるさくする理由がわかりません:-)開発者がテザーを使用したくない場合、定義済みの依存関係を消去することはできません。そして、私の意見でwindow.Tether = window.Tether || {};Tether is not a function、意味のあるエラーの代わりに、それがスローされるのでより悪いです。
Cezary Daniel Nowak

10

エラーメッセージを回避し、Bootstrapツールヒントを使用していない場合は、Bootstrapをロードする前にwindow.Tetherを定義できます。

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

これは私にとってはうまくいきました...私の場合、私はブートストラップ付きの角度を使用しています。ありがとう!
MizAkita 2017

うまくいきました、私は自分のファイルに同じものを追加しました、それは現在うまくいきます。このアイデアをありがとう。window.Tether = {}; define(['tether'], function (Tether) { return window.Tether = Tether; });
Ehsan Aghaei

8

あなたは私のガイドラインを実行する必要があり
ます:1. Gemfileに以下のソースを追加します

source 'https://rails-assets.org' do
  gem 'rails-assets-tether', '>= 1.1.0'
end
  1. コマンドを実行:

    バンドルインストール

  2. application.jsのjQueryの後にこの行を追加します。

    // = jqueryが必要
    // =テザーが必要

  3. Railsサーバーを再起動します。


7

以下のようにnpmを介してテザーをインストールします

npm install tether --save-dev

次に、以下のようにブートストラップの上のhtmlにテザーを追加します

<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
または、このようなバウアーbower install tether --save-dev
Farside '21

13
npm install tether --save代わりにすべきではない--save-devですか?本番環境でも必要になります。
siannone 2016年

7

webpackの場合、これをwebpack.config.js次のように解決しました:

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

5

追加のメモ。圧縮されていないJavaScriptファイルを確認すると、次の条件が見つかります。

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

したがって、エラーメッセージには必要な情報が含まれています。

このリンクからアーカイブをダウンロードできます。

非圧縮バージョン:

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


3

私がこれを使用したwebpackを使用してwebpack.config.js

var plugins = [

    ...

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

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

うまくいったおかげで、未使用の行を削除するように回答を編集することをお勧めしますtether: 'tether',
ghiscoding

あなたは正しいですが、例として、正確なネーミングが必要であるという事実を示していると思います。
ヘンリー

2

最新のブーストラップ4ビルドを使用するrequirejsでこの問題が発生していました。私は次のように定義しただけです:

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

ブートストラップのチェックをだますために、私のhtmlヘッドタグで。次に、アプリをロードするrequireの直前に2番目のrequireステートメントを追加し、続いてブートストラップ依存関係を追加しました。

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

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

これらの両方を組み合わせて使用​​すると、現在のブートストラップ4アルファビルドを使用しても問題はありません。


2

generator-aspnetcore-spaおよび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)
            ...
        ]
};

3つだけ:... new webpack.ProvidePlugin({$: 'jquery'、jQuery: 'jquery'、Tether: 'tether'})、...
Mentor

1

Bootstrap 4を備えたwebpack 1または2には、

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

1

Brunchを使用している場合は、これをyourの最後に追加できますbrunch-config.js

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

1

require.js AMDローダーを使用する場合:

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

これは本当に役に立ちました。私は長い間これにこだわっていました-必要な呼び出しをネストできることに気づきませんでした。賛成票を投じてください。
grimdog_john 2018年

1

Bootstrap4を実行しているLaravel Mixユーザーの場合、実行する必要があります

npm installer tether --save

次に更新します resources/assets/js/bootstrap.jsテザーをロードしてウィンドウオブジェクトに移動に。

これは私のものです:(私も実行しなければならなかったことに注意してくださいnpm install popper.js --save

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

0

@adilapapayaの回答に追加します。特にember-cliユーザーの場合はtether

bower install --save tether

次のように、ember-cli-build.jsブートストラップの前にファイルに含めます。

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

また、webpackを使用する場合は、公開プラグインが必要です。webpack.config.jsに、このローダーを追加します

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

0

私は同じ問題を抱えていましたが、これが私がそれを解決した方法です。私はレール5.1.0rc1にいます

require jqueryを追加し、application.jsファイル内にテザーを追加してください。

//= require jquery
//= require tether

テザーがインストールされていることを確認してください


0

方法#1ここからダウンロードしてプロジェクトに挿入するか、
方法#2:ブートストラップスクリプトソースの前に以下のコードを使用します。

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

0

Bootstrap 4のドキュメントの指示に従うことをお勧めします。

CSSをロードするために、他のすべてのスタイルシートの前にスタイルシート<link>をコピーして貼り付けます<head>

<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プラグイン、jQuery、Tetherをページの終わり近く、終了タグの直前に追加します。コードに依存しているため、jQueryとTetherを最初に配置してください。ドキュメントではjQueryのスリムビルドを使用していますが、フルバージョンもサポートされています。

<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

UMD / AMDソリューション

UMDを介して実行している人のために、require.js、簡潔な解決策があります。

UMDとしてtetherロードさTooltipれる依存関係として必要なモジュールで、モジュール定義の前に、テザーの定義に短いスニペットを配置します。

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

冒頭のこの短いスニペットは、実際にはアプリケーションのより高いレベルに配置できます。最も重要なことはbootstrapTether依存関係のあるコンポーネントを実際に使用する前に呼び出すことです。

// ===== 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: Boostrap 4.1 StableではTetherPopper.jsに置き換えられました。使用方法に関するドキュメントをご覧ください。


-2

私は同じ問題を抱えていましたが、jsを含める前にjquery-3.1.1.minを含めることで解決しました。それが役に立てば幸い。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.