如何解决错误;'错误:Bootstrap工具提示需要Tether(http://github.hubspot.com/tether/)'


176

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

错误:Bootstrap工具提示需要系绳(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

没有实际的代码可以发布,但是如果您访问www.atlasestateagents.co.uk并查看控制台,您会看到javascript错误吗?
Michael LB

我使用了这些确切的代码行,它们为那些想知道该版本的人在V3中为我消除了错误。
威廉

@MichaelLB,而不是链接到您的网站,建议您在问题本身内在此处放置一些代码段,以确保您的网站将得到更新,并且会失去实际性。
远端

Answers:


239

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

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

考虑使用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. 按照文档所述设置bootstrap-loader;
  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)现在正在寻找“ Tether”而不是“ window.Tether”。
ThePadawan

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 ...,所以我不是很了解您的输入的价值。
远端

1
即使您不使用需要Tether的引导功能,也会显示Tether警告。我的解决方案在控制台中隐藏了令人讨厌的消息。
Cezary Daniel Nowak

2
并且此更改不会更新3rdparty或供应商脚本。您可以将其添加到<script src =“ bootstrap.js”>
Cezary Daniel Nowak

我不是很了解你,为什么不一样window.Tether = window.Tether || {};呢?另外,您的解决方案中有一个警告,即如果在执行您的操作之前加载模块,它可以擦除全局范围内已定义的依赖项。
远端

5
这是Bootstrap的Alpha版的骇客。我看不出要挑剔的原因:-)如果开发人员不想使用Tether,则不清除已定义的依赖项。我认为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

工作正常,我在文件中添加了相同的文件,现在工作正常。感谢这个想法。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以上的bootstrap中,如下所示

<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

13
它不应该是npm install tether --save不是--save-dev?生产中也将需要它。
siannone

7

对于webpack,我使用以下命令解决了此问题webpack.config.js

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


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

我在使用最新的boostrap 4版本的requirejs遇到了这个问题。我最后只是定义:

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

在我的html head标签中,以愚弄引导程序的检查。然后,我在需要加载我的应用程序之前添加了第二条require语句,随后添加了我的引导依赖项:

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

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

串联使用这两个选项,使用当前的bootstrap 4 alpha构建应该没有问题。


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

仅三个就足够了:... new webpack.ProvidePlugin({$:'jquery',jQuery:'jquery',Tether:'tether'}),...
导师

1

对于带有Bootstrap 4的Webpack 1或2,您需要

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

1

如果您使用的是早午餐,则可以在末尾添加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']);
});

这真的帮助了我。我被这个问题困扰了很长时间-没意识到您可以嵌套require调用。先生,请为您投票。
grimdog_john

1

对于在那里运行Bootstrap4的Laravel Mix用户,您将需要运行

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

添加到@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上

确保在application.js文件中添加require jquery和tether,它们必须位于最顶部

//= 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文档中的说明

将样式表复制粘贴<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

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

实际上,这个简短的代码片段可以放在应用程序的任何更高级别上,这是最重要的-在实际使用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:在自举4.1稳定他们取代系绳,与Popper.js,看到上使用的文档


-2

我有同样的问题,我在添加任何js之前都包含了jquery-3.1.1.min来解决了这个问题,它的工作原理很吸引人。希望能帮助到你。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.