如何修复错误: ‘错误: 引导提示需要系绳( http://github.hubspot.com/Tether/)’

我正在使用 Bootstrap V4，控制台中记录了以下错误;

错误: 引导工具提示需要系绳 (http://github.hubspot.com/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>

我是否正确地“安装”了系绳？

有人能帮我删除这个错误吗？

如果您希望在我的网站上查看错误，请单击 给你并加载您的控制台。

173595 次浏览
小开
最佳答案

对于 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:

引导程序4 阿尔法需要 系绳，所以你需要包括 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>
小开

附加说明。如果你检查未压缩的 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

小开

通过下面的 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>
小开

UMD/AMD 解决方案

对于那些通过 UMD和 require.js进行编译的人来说，有一个简洁的解决方案。

在模块中，需要 tether作为依赖项，将 Tooltip作为 UMD 加载，在模块定义之前，只需在 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
*/
//...
});

最开始的这个简短代码片段实际上可以放在应用程序的任何更高级别上，这是最重要的事情——在具有 Tether依赖关系的 bootstrap组件的实际使用之前调用它。

// ===== 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稳定版中，他们用 Popper.js取代了 系绳，参见 使用说明书。

小开

就个人而言，我使用 Bootstrap 功能的一小部分，不需要附加系绳。

这应该会有所帮助:

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

要添加到@adilapaya 的答案

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');
小开

如果您正在使用 npm 和 Browserify:

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


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

如果你正在使用 Webpack:

  1. 按照文档中的描述设置引导加载程序;
  2. 通过 npm 安装 tether.js;
  3. 将 tether.js 添加到 webpack 供应插件插件中。

Webpack.config.js:

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

来源

小开

我在使用最新的 boostrap 4 build 时遇到了这个问题，最后我只是定义:

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

在我的超文本标签，以欺骗引导程序的检查。然后，我在加载我的应用程序的需求之前添加了第二个 request 语句，随后是我的引导程序依赖项:

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


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

同时使用这两种方法，使用当前的 bootstrap 4alpha 版本应该没有问题。

小开

如果使用 webpack，则需要暴露插件，在 webpack.config.js 中添加这个加载程序

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

你应该做我的指导方针:
1. 在 Gemfile 添加以下源码

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

  1. 运行命令:

    捆绑式安装捆绑式安装

  2. 在 application.js 中的 jQuery 后面添加这一行。

    //= 要求 jquery
    需要系绳

  3. 重启 Rails 服务器。

小开

使用 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/)');
}
小开

我遇到了同样的问题，我通过包含 jquery-3.1.1解决了它。在包括任何 js 之前，它的工作像一个魅力。希望能有帮助。

小开

为 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)
...
]
};
小开

对于 webpack 1或2与 Bootstrap 4你需要

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

我也遇到过同样的问题，我就是这样解决的。 我在5.1.0 rc1轨道上

确保在 application.js 文件中添加 need jquery 和 tether，它们必须位于最顶部，如下所示

//= require jquery
//= require tether

只要确保已经安装了系绳

小开

如果希望避免出现错误消息，并且不使用 Bootstrap 工具提示，则可以定义窗口。加载引导程序之前的系绳。

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

如果你正在使用早午餐，你可以在你的 brunch-config.js的末尾加上这个:

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

方法 # 1 : 从 给你下载并将其插入到您的项目中，或者 < br/> 方法二: 在引导脚本之前使用以下代码源代码:

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

对于 webpack，我用 webpack.config.js解决了这个问题:

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

如果你使用的是 reque.js 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']);
});
小开

我建议按照 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 页，正好在结束标记之前 首先是 Tether，因为我们的代码依赖于它们 在我们的文档中的超薄版本，也支持完整版本。

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

对于运行 Bootstrap4的 LaravelMix 用户，您需要运行

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

提交答案