Я использую Bootstrap V4, и в консоли записывается следующая ошибка:
Ошибка: подсказки Bootstrap требуют привязки (http://github.hubspot.com/tether/)
Я попытался удалить ошибку, установив Tether, но он не сработал. Я установил "Tether", включив следующие строки кода:
<link rel="stylesheet" href="/tether.min.css">
<script src="/tether.min.js"></script>
Правильно ли я установил тросик?
Может кто-нибудь помочь мне удалить эту ошибку?
Если вы хотите просмотреть ошибку на моем сайте, нажмите здесь и загрузите консоль.
Поскольку бета Bootstrap 4 зависит не от Tether, а от Popper.js. Все скрипты (должны быть в этом порядке):
<script src="/jquery-3.3.1.slim.min.js"></script>
<script src="/popper.min.js"></script>
<script src="/bootstrap.min.js"></script>
См. Текущую документацию для новейших версий скриптов.
Bootstrap 4 alpha нуждается в Tether, поэтому вам нужно включить tether.min.js
прежде чем включать bootstrap.min.js
, например.
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist//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'
bootstrap.min.js
. Это все еще появляется, если вы закомментируете это. Да, я бы отправил новый вопрос, если у Google нет решения. :)
Если вы используете Webpack:
webpack.config.js:
plugins: [
<... your plugins here>,
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.Tether": 'tether'
})
]
Если вы используете npm и просматриваете браузер:
// 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.');
};
Если вы хотите избежать сообщения об ошибке и не используете подсказки инструмента Bootstrap, вы можете определить window.Tether перед загрузкой Bootstrap.
<script>
window.Tether = {};
</script>
<script src="/bootstrap.min.js"></script>
window.Tether = {}; define(['tether'], function (Tether) { return window.Tether = Tether; });
Вы должны сделать мое руководство:
1. Добавьте следующий источник в Gemfile
source 'https://rails-assets.org' do
gem 'rails-assets-tether', '>= 1.1.0'
end
Команда запуска:
пакет установить
Добавьте эту строку после jQuery в application.js.
//= требуется jquery
// = require tether
Перезагрузите сервер рельсов.
Установите привязку через npm, как показано ниже
npm install tether --save-dev
затем добавьте привязку к вашему html над бутстрапом, как показано ниже
<script src="/tether.min.js"></script>
<script src="jspm_packages/github/twbs/[email protected]/js/bootstrap.js"></script>
bower install tether --save-dev
npm install tether --save
это не должно быть npm install tether --save
вместо --save-dev
? Это будет необходимо и в производстве.
для webpack Я решил это с помощью (webpack.config.js):
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
"window.jQuery": "jquery",
Tether: 'tether'
})
Дополнительная заметка. Если вы проверите несжатый файл javascript, вы найдете условие:
if(window.Tether === undefined) {
throw new Error('Bootstrap tooltips require Tether (http://github.hubspot.com/tether)')
}
Таким образом, сообщение об ошибке содержит требуемую информацию.
Вы можете загрузить архив из link.
Несжатая версия:
С помощью 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',
Работает для генератора-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)
...
]
};
У меня была эта проблема с requirejs, используя новейшую сборку boostrap 4. Я просто определил:
<script>
window.Tether = {};
</script>
в моем теге html head, чтобы обмануть проверку начальной загрузки. Затем я добавил вторую инструкцию require перед загрузкой моего приложения, а затем с моей загрузкой:
require(['tether'], function (Tether) {
window.Tether = Tether;
});
require([
"app",
], function(App){
App.initialize();
});
Использование обоих из них в тандеме, и у вас не должно возникнуть проблемы с использованием текущей сборки bststart 4.
Если вы используете load.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']);
});
Если вы используете Brunch, вы можете добавить это в конце своего brunch-config.js
:
npm: {
enabled: true,
globals: {
$: 'jquery', jQuery: 'jquery', 'Tether': 'tether'
}
}
Для webpack 1 или 2 с Bootstrap 4 вам нужно
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Tether: 'tether'
})
Для пользователей Laravel Mix, использующих Bootstrap4, вам нужно будет запустить
npm installer tether --save
Затем обновите свои resources/assets/js/bootstrap.js
чтобы загрузить Tether и перенести его в объект окна.
Вот как выглядит мой: (Обратите внимание, я также должен был запустить npm install popper.js --save
)
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
window.Tether = require('tether');
require('bootstrap');
Я рекомендую следовать инструкциям в Документация Bootstrap 4:
Скопируйте-вставьте таблицу стилей
<link>
в свой<head>
, прежде чем все остальные stylesheets для загрузки нашего CSS.
<link rel="stylesheet" href="/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
Добавьте наши плагины JavaScript, jQuery и Tether в конце вашего страниц, перед закрывающим тегом. Обязательно поместите jQuery и Tether, так как наш код зависит от них. Хотя мы используем jQuerys тонкая сборка в наших документах, полная версия также поддерживается.
<script src="/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6//bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
Метод # 1: скачайте с здесь и вставьте его в свои проекты или
Метод # 2: используйте код ниже перед загрузкой script source:
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
У меня была такая же проблема, и я решил это. Я на рельсах 5.1.0rc1
Обязательно добавьте требуемый jquery и tether внутри вашего файла application.js, они должны быть на самом верху, как этот
//= require jquery
//= require tether
Просто убедитесь, что установлен тросик
И если вы используете webpack, вам понадобится плагин expose. В свой webpack.config.js добавьте этот загрузчик
{
test: require.resolve("tether"),
loader: "expose?$!expose?Tether"
}
Чтобы добавить к ответу @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');
Для тех парней, которые делают это через 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 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 они заменили Tether на Popper.js, см. Документацию по использованию.
У меня была та же проблема, и я решил ее, включив jquery-3.1.1.min, прежде чем включать js, и это сработало как шарм. Надеюсь, что это поможет.