오류 수정 방법: '오류: 부트스트랩 툴팁에는 테더가 필요합니다(http://github.hubspot.com/tether/)' .
Bootstrap V4를 사용하고 있는데 콘솔에 다음 오류가 기록됩니다.
오류: 부트스트랩 툴팁에 테더가 필요합니다(http://github.hubspot.com/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>
테더를 올바르게 '설치'했습니까?
이 오류를 제거하는 것을 도와줄 수 있는 사람?
내 사이트에서 오류를 보려면 여기를 클릭하고 콘솔을 로드하십시오.
부트스트랩 4 안정기의 경우:
베타 부트스트랩 4는 테더가 아닌 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>
최신 스크립트 버전은 최신 설명서를 참조하십시오.
부트스트랩 4알파만:
부트스트랩 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>
웹팩을 사용하는 경우:
- 부트스트랩 로더를 문서에 설명된 대로 설정합니다.
- npm을 통해 tether.js를 설치합니다.
- 웹 팩 ProviderPlugin 플러그인에 tether.js를 추가합니다.
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');
개인적으로 저는 부트스트랩 기능의 작은 부분집합을 사용하며 테더를 부착할 필요가 없습니다.
이를 통해 다음과 같은 이점을 얻을 수 있습니다.
window.Tether = function () {
throw new Error('Your Bootstrap may actually need Tether.');
};
오류 메시지를 방지하고 부트스트랩 도구 팁을 사용하지 않는 경우 창을 정의할 수 있습니다.부트스트랩을 로드하기 전에 테더.
<script>
window.Tether = {};
</script>
<script src="js/bootstrap.min.js"></script>
당신은 내 지침을 따라야 합니다.
합니다. Gem파일에 bellow source 추가
source 'https://rails-assets.org' do
gem 'rails-assets-tether', '>= 1.1.0'
end
명령 실행:
묶음 설치
application.js에서 jQuery 뒤에 이 행을 추가합니다.
//= 잡동사니가 필요한
//= 테더가 필요합니다.레일 서버를 다시 시작합니다.
아래와 같이 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>
웹팩의 경우 이 문제를 해결했습니다.webpack.config.js:
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
"window.jQuery": "jquery",
Tether: 'tether'
})
추가 메모.압축되지 않은 자바스크립트 파일을 확인하면 다음과 같은 조건이 나타납니다.
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
웹팩을 이용해서 이것을 사용했습니다.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/)');
}
최신 부스트랩 4 빌드를 사용하는 requirejs에 문제가 있었습니다.저는 결국 정의를 내렸습니다.
<script>
window.Tether = {};
</script>
내 html 헤드 태그에 부트스트랩의 수표를 속이기 위해.그런 다음 앱을 로드하는 요구 사항 직전에 두 번째 요구 사항을 추가했고, 그 후 부트스트랩 의존성을 추가했습니다.
require(['tether'], function (Tether) {
window.Tether = Tether;
});
require([
"app",
], function(App){
App.initialize();
});
이 두 가지를 함께 사용하면 현재 부트스트랩 4 알파 빌드를 사용하는 데 문제가 없을 것입니다.
제너레이터-aspnetcore-spa 및 부트스트랩 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)
...
]
};
부트스트랩 4가 탑재된 웹팩 1 또는 2의 경우 필요합니다.
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Tether: 'tether'
})
브런치를 사용하는 경우 마지막에 추가할 수 있습니다.brunch-config.js:
npm: {
enabled: true,
globals: {
$: 'jquery', jQuery: 'jquery', 'Tether': 'tether'
}
}
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']);
});
부트스트랩4를 실행하는 Laravel Mix 사용자의 경우 실행해야 합니다.
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');
@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');
그리고 웹팩을 사용하는 경우 노출 플러그인이 필요합니다.webpack.config.js에서 이 로더를 추가합니다.
{
test: require.resolve("tether"),
loader: "expose?$!expose?Tether"
}
저도 같은 문제가 있었는데 이렇게 해결했습니다.5.1.0rc1 레일 위에 있습니다.
application.js 파일 안에 require jquery와 tether를 추가해야 합니다. 그들은 이렇게 맨 위에 있어야 합니다.
//= require jquery
//= require tether
테더를 장착해야 합니다.
방법 #1: 여기서 다운로드하여 프로젝트에 삽입하거나,
메서드 #2: 부트스트랩 스크립트 소스 전에 아래 코드를 사용합니다.
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
스타일시트 복사 붙여넣기
<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">
페이지의 끝, 마감 태그 바로 앞에 자바스크립트 플러그인, 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>
UMD/AMD 솔루션
UMD를 통해 작업을 하고 있는 사람들을 위해, 그리고 다음을 통해 컴파일을 합니다.require.js, 라코닉한 해결책이 있습니다.
다음이 필요한 모듈에서tether부하가 걸리는 종속성으로서.Tooltip모듈 정의 앞에 UMD로서 테더의 정의에 대한 간단한 토막글을 붙입니다.
// 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']
}
업데이트: Boostrap 4.1 Stable에서 Tether를 Popper.js로 대체했습니다. 사용 설명서를 참조하십시오.
저도 같은 문제가 있었는데 js를 포함하기 전에 jquery-3.1.1.min을 포함해서 해결했는데 매력적으로 효과가 있었습니다.도움이 되길 바랍니다.
언급URL : https://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h
'sourcecode' 카테고리의 다른 글
| 배열 값별 MySQL 정렬 순서 (0) | 2023.10.31 |
|---|---|
| JavaBeanExecutable HV000254에 Java Enum에 대한 매개 변수 메타데이터가 없습니다. (0) | 2023.10.31 |
| AJAX 호출 보안 설정 (0) | 2023.10.31 |
| WP 플러그인 Polylang 기사를 기본적으로 모든 언어로 "복사" (0) | 2023.10.31 |
| MySQL 오류 #1071 - 지정한 키가 너무 깁니다. 최대 키 길이는 767바이트입니다. (0) | 2023.10.31 |