오류를 수정하는 방법; '오류 : 부트 스트랩 툴팁에는 테더 (http://github.hubspot.com/tether/)가 필요합니다'

Bootstrap V4를 사용하고 있으며 콘솔에 다음 오류가 기록됩니다.

오류 : 부트 스트랩 툴팁에 테더가 필요합니다 ( 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>

테더를 올바르게 '설치'했습니까?

누구 든지이 오류를 제거하도록 도울 수 있습니까?

내 사이트에서 오류를 보려면 여기 를 클릭 하고 콘솔을로드하십시오.

부트 스트랩 4 안정의 경우 :

베타 부트 스트랩 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>

최신 스크립트 버전 은 현재 설명서 를 참조하십시오 .

부트 스트랩 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>

Webpack을 사용하는 경우 :

1. 문서에 설명 된대로 부트 스트랩 로더를 설정하십시오.
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'
        })
    ]

출처

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

오류 메시지를 피하고 Bootstrap 도구 설명을 사용하지 않는 경우, Bootstrap을로드하기 전에 window.Tether를 정의 할 수 있습니다.

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

내 지침을 수행해야합니다.
1. Gemfile에 다음 소스를 추가하십시오 .

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

2. 명령을 실행하십시오.

   번들 설치

3. application.js에서 jQuery 뒤에이 줄을 추가하십시오.

   // = jquery 필요
   // = 테더 필요

4. 레일즈 서버를 다시 시작하십시오.

아래와 같이 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을 사용하여 이것을 다음에서 사용했습니다 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/)');
  }

최신 boostrap 4 빌드를 사용하여 requirejs 에서이 문제가 발생했습니다. 나는 단지 다음과 같이 정의했다.

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

부트 스트랩 검사를 속이는 html 헤드 태그에. 그런 다음 내 앱을로드하는 요구와 부트 스트랩 종속성에 앞서 두 번째 require 문을 추가했습니다.

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

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

이 두 가지를 동시에 사용하면 현재 부트 스트랩 4 알파 빌드를 사용하는 데 아무런 문제가 없습니다.

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

부트 스트랩 4가있는 웹 팩 1 또는 2의 경우

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

Brunch를 사용하는 경우 다음 끝에이를 추가 할 수 있습니다 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']);
});

Bootstrap4를 실행하는 Laravel Mix 사용자는 다음을 실행해야합니다.

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

@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 파일 내에 jquery와 tether가 필요하다는 것을 반드시 추가하십시오.

//= require jquery
//= require tether

테더가 설치되어 있는지 확인하십시오.

방법 # 1 : 여기 에서 다운로드 하여 프로젝트에 삽입하거나
방법 # 2 : 부트 스트랩 스크립트 소스 앞에 아래 코드를 사용하십시오.

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

Bootstrap 4 설명서 의 지침을 따르는 것이 좋습니다 .

CSS를로드하기 위해 다른 모든 스타일 시트보다 먼저 스타일 시트 <link>를 복사하여 붙여 넣기하십시오 <head>.

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

UMD / AMD 솔루션

UMD를 통해 그것을 하고 컴파일 하는 사람들에게는 require.js간결한 해결책이 있습니다.

모듈 정의 앞에 tether종속성으로 필요 하고 TooltipUMD로 로드 되는 모듈에서 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는 참조 사용에 대한 설명서를 .

나는 같은 문제가 있었고 js를 포함하기 전에 jquery-3.1.1.min을 포함 시켜서 해결했으며 매력처럼 작동했습니다. 도움이 되길 바랍니다.