web-dev-qa-db-ja.com

エラーを修正する方法 'エラー：ブートストラップツールチップにはTetherが必要です（http://github.hubspot.com/tether/）'

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

エラー：ブートストラップツールチップにはTetherが必要です（ 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>

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

誰かが私がこのエラーを取り除くのを手伝ってくれる？

私のサイトでエラーを見たい場合は、 ここ をクリックしてコンソールをロードしてください。

javascripttwitter-bootstrapbootstrap-4tether
172
Michael LB

Bootstrap 4安定版の場合：

Beta 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のみ：

ブートストラップ4alphaには Tether が必要なので、tether.min.jsを含める必要がありますbeforebootstrap.min.jsを含めます。

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

Webpackを使用している場合

  1. Docsに記述されているようにブートストラップローダーを設定します。
  2. Npmでtether.jsをインストールしてください。
  3. WebパックProvidePluginプラグインにtether.jsを追加します。

webpack.config.js： 

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

出典

19
Snowman

Npmとbrowserifyを使っているなら：

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

// require
global.Tether = require('tether');
18
Jannic Beck

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

これは役立ちます。

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

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

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

あなたは私の指針をしなければなりません：
1。以下のソースをGemfileに追加

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

  1. コマンドを実行します。

    バンドルインストール

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

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

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

8
Quy Le

以下のようにnpmでtetherをインストールしてください。

npm install tether --save-dev

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

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

ウェブパックの場合、私はこれをwebpack.config.jsで解決しました：

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

追加のメモ圧縮されていないJavascriptファイルをチェックすると、次のような状態になります。

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

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

アーカイブは link からダウンロードできます。

非圧縮バージョン

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

5
Anton Lyhin

ウェブパックを使う私はこれを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/)');
  }
3
Henry

私は最新のboostrap 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
Throttlehead

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)
            ...
        ]
};
2
Vladimir

Bootstrap 4を使ったwebpack 1または2の場合、あなたは必要とします

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

あなたがブランチを使用しているならば、あなたはあなたのbrunch-config.jsの終わりにこれを加えることができます：

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

AMDローダーrequire.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']);
});
1
Lukas Pierce

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

他のすべてのスタイルシートの前に、スタイルシート<link>を<head>にコピーアンドペーストして、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">

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
CodeBiker

そしてwebpackを使っているならば、あなたはexposeプラグインを必要とするでしょう。あなたのwebpack.config.jsに、このローダーを追加してください

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

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

UMD/AMDソリューション

_ umd _ を使用してコンパイルし、require.jsを介してコンパイルしている人には、緩やかな解決策があります。

モジュール定義の前に、依存関係としてtetherを必要とし、UMDとしてTooltipをロードするモジュールでは、単に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
    */
    //...
});

冒頭のこの短いスニペットは、実際にはより高いレベルのアプリケーションに置くことができます。最も重要なことは、bootstrap依存関係を持つ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']       
}

UPD： Boostrap 4.1では、安定してTetherを Popper.js に置き換えました。 使用法に関するドキュメントを参照してください 。

0
Farside

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

必ずapplication.jsファイル内にrequire jqueryとtetherを追加してください。

//= require jquery
//= require tether

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

0
Ruben Cruz

方法＃1 ：からダウンロード - ここ そしてあなたのプロジェクトに挿入する。
方法＃2 ：ブートストラップスクリプトのソースの前に次のコードを使用します。

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

あなたのためにLaravelそこにBootstrap4を実行しているユーザーを混在させるには、実行する必要があります。

npm installer tether --save

それからresources/assets/js/bootstrap.jsを更新してTetherをロードし、それをwindowオブジェクトに持ってきます。

これが私のように見えるものです：（私はnpm install popper.js --saveも実行しなければなりませんでした）

window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
window.Tether = require('tether');
require('bootstrap');
0
zeros-and-ones