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

IT技术 javascript twitter-bootstrap bootstrap-4 tether
2021-01-27 07:18:39

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

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

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

谁能帮我消除这个错误?

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

6个回答

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

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>
已解决,谢谢!然而,修复它会导致一个新的警告,也许是一个新的问题?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'
2021-03-30 07:18:39
考虑使用 npmcdn 链接到在 npm 上发布的包,因为有些人倾向于从 github 中删除 build/dist 文件。https://npmcdn.com/tether@1.2.4/dist/https://npmcdn.com/bootstrap@4.0.0-alpha.2/dist/
2021-03-31 07:18:39
但奇怪的是,v4-alpha.getbootstrap.com 对此没有任何说明
2021-03-31 07:18:39
伟大的!认为你得到的错误来自bootstrap.min.js图书馆。如果您将其注释掉,它是否仍然显示。是的,如果 Google 没有解决方案,我会发布一个新问题。:)
2021-04-12 07:18:39
它适用于 aplha.3 版本。刚刚有这个错误。我相信系绳现在作为一个包下载,不再包含在内。因此,您还必须包含此脚本。
2021-04-14 07:18:39

如果您使用的是 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'
        })
    ]

来源

这就是你所需要的。我正在这样做,但它不起作用。
2021-03-23 07:18:39
正如我在 Github 问题上提到的,较新版本的 Bootstrap(例如 4.0.0-alpha.6)现在正在寻找“Tether”而不是“window.Tether”。
2021-04-05 07:18:39

如果您使用 npm 和 browserify:

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

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

我个人使用 Bootstrap 功能的一小部分,不需要附加 Tether。

这应该有帮助:

window.Tether = function () {
  throw new Error('Your Bootstrap may actually need Tether.');
};
如果您不使用需要 Tether 的引导程序功能,则甚至会显示 Tether 警告。我的解决方案在控制台中隐藏了烦人的消息。
2021-03-15 07:18:39
我真的不明白你,为什么不只是一个班轮window.Tether = window.Tether || {};呢?另外,您的解决方案中有一个警告,它可以在全局范围内擦除已定义的依赖项,如果该module将在您的事情执行之前加载。
2021-03-16 07:18:39
那么你有什么建议,削减这些线?不好,因为您不应该修改供应商第三方库,它会阻止您以后进行更新。如果您不像您所说的那样使用这些 Bootstrap 组件 - 为什么您需要 Tether ......所以我并没有真正理解您输入的value。
2021-03-18 07:18:39
这是 Bootstrap alpha 版本的 hack。我看不出有什么挑剔的理由 :-) 如果开发人员不想使用 Tether,则擦除已定义的依赖项不是一种情况。而且在我看来window.Tether = window.Tether || {};更糟,因为它会抛出Tether is not a function,而不是有意义的错误。
2021-03-21 07:18:39
并且此更改不会更新 3rdparty 或供应商脚本。您可以将它添加到 <script src="bootstrap.js"> 以上
2021-03-26 07:18:39

如果你想避免错误信息并且你没有使用 Bootstrap 工具提示,你可以在加载 Bootstrap 之前定义 window.Tether。

<script>
  window.Tether = {};
</script>
<script src="js/bootstrap.min.js"></script>
这对我来说很有效……在我的情况下,我使用 angular 和 bootstrap。谢谢!
2021-04-11 07:18:39
工作了,我在我的文件中添加了相同的内容,现在工作正常。感谢这个想法。window.Tether = {}; define(['tether'], function (Tether) { return window.Tether = Tether; });
2021-04-12 07:18:39