त्रुटि को कैसे ठीक करें; 'त्रुटि: बूटस्ट्रैप टूलटिप्स के लिए टेदर (http://github.hubspot.com/tether/) की आवश्यकता होती है'

Question

मैं बूटस्ट्रैप V4 का उपयोग कर रहा हूं और कंसोल में निम्नलिखित त्रुटि लॉग की गई है;

त्रुटि: बूटस्ट्रैप टूलटिप्स को Tether की आवश्यकता होती है ( 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>

क्या मैंने सही ढंग से 'टीथर' स्थापित किया है?

क्या कोई मुझे इस त्रुटि को दूर करने में मदद कर सकता है?

यदि आप मेरी साइट पर त्रुटि देखना चाहते हैं, तो कृपया यहां क्लिक करें और अपना कंसोल लोड करें।

Comments

नमस्ते, क्या आप अपने द्वारा उपयोग किए गए कोड को पोस्ट कर सकते हैं? बेहतर होगा अगर आप कोड को jsfiddle या कहीं और डाल सकते हैं।

— kucing_terbang

पोस्ट करने के लिए कोई वास्तविक कोड नहीं है, लेकिन यदि आप www.atlasestateagents.co.uk पर जाते हैं और कंसोल को देखेंगे तो आपको जावास्क्रिप्ट त्रुटि दिखाई देगी?

— माइकल एलबी

मैंने कोड की इन सटीक पंक्तियों का उपयोग किया और उन्होंने मेरे लिए V3 में त्रुटि को हटा दिया, किसी को भी उस संस्करण के बारे में सोचकर।

— विलियम

@MichaelLB, आपकी वेबसाइट के लिंक के बजाय, मैं यहाँ कुछ कोड-स्निपेट लगाने की सलाह दूंगा, प्रश्न के भीतर ही, आपकी वेबसाइट अपडेट हो जाएगी, और यह वास्तविकता खो देगी।

— फ़ारसाइड

समाधान stackoverflow.com/questions/47431612/…

— पाउलो मोइज

Answer 1

बूटस्ट्रैप के लिए 4 स्थिर:

चूंकि बीटा बूटस्ट्रैप 4 टीथर पर निर्भर नहीं है, लेकिन पॉपर.जेएस । सभी स्क्रिप्ट ( इस क्रम में होनी चाहिए ):

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

Comments

फिक्स्ड, धन्यवाद! हालाँकि, यह तय करना कि एक नई चेतावनी है, शायद एक नए प्रश्न के लिए? 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 के पास समाधान नहीं है, तो मैं एक नया प्रश्न पोस्ट करूंगा। :)

— आदिलपय्या

Npm पर प्रकाशित संकुल से लिंक करने के लिए npmcdn का उपयोग करने पर विचार करें, क्योंकि कुछ लोग गिथब से बिल्ड / डिस्टल फ़ाइलों को हटाने के लिए करते हैं। https://npmcdn.com/tether@1.2.4/dist/औरhttps://npmcdn.com/bootstrap@4.0.0-alpha.2/dist/

— eddywashere

लेकिन इसका अजीब, v4-alpha.getbootstrap.com इसके बारे में कुछ नहीं कहता है

— मेक्सिकम सेमेनिखिन

यह संस्करण aplha.3 पर करता है ।3। बस यह त्रुटि थी। मेरा मानना ​​है कि टीथर अब एक पैकेज के रूप में डाउनलोड किया गया है और अब इसमें शामिल नहीं है। तो आपको इस स्क्रिप्ट को शामिल करना होगा।

— टिम वर्मालेन

Answer 2

यदि आप वेबपैक का उपयोग कर रहे हैं:

1. डॉक्स में वर्णित बूटस्ट्रैप-लोडर सेट करें;
2. Npm के माध्यम से tether.js स्थापित करें;
3. वेबपैक ProvPlugin प्लगइन में tether.js जोड़ें।

webpack.config.js:

plugins: [
        <... your plugins here>,
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            "window.Tether": 'tether'
        })
    ]

स्रोत

Comments

क्या यह सब आपकी जरूरत है मैं यह कर रहा हूं और यह काम नहीं कर रहा है।

— हेनरी

जैसा कि मैंने गितुब मुद्दे पर उल्लेख किया है, बूटस्ट्रैप के नए संस्करण (जैसे 4.0.0-अल्फा.6) अब "विंडोट्रेड" के बजाय "टीथर" की तलाश कर रहे हैं।

— दपड़ावन २४'१

Answer 3

यदि आप npm और ब्राउजर का उपयोग कर रहे हैं:

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

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

Answer 4

व्यक्तिगत रूप से मैं बूटस्ट्रैप कार्यक्षमता के छोटे सबसेट का उपयोग करता हूं और टीथर को संलग्न करने की आवश्यकता नहीं है।

यह मदद करनी चाहिए:

window.Tether = function () {
  throw new Error('Your Bootstrap may actually need Tether.');
};

Comments

तो तुम क्या प्रस्ताव है, इन लाइनों को काटने के लिए? अच्छा नहीं है, क्योंकि आपको विक्रेताओं और तीसरे पक्ष के कामों को संशोधित नहीं करना चाहिए , यह आपको बाद में अपडेट करने से रोकेगा। यदि आप इन बूटस्ट्रैप घटकों का उपयोग नहीं करते हैं जैसा कि आप कहते हैं - आपको टीथर की आवश्यकता क्यों होगी ... तो मैं वास्तव में आपके इनपुट के मूल्य को नहीं समझ रहा हूं।

— फ़ारसाइड

यदि आप बूटस्ट्रैप कार्यक्षमता का उपयोग नहीं करते हैं, तो Tether चेतावनी को भी दिखाया गया है। मेरा समाधान कंसोल में कष्टप्रद संदेश छुपाता है।

— सीज़री डैनियल नोवाक

और यह परिवर्तन 3rdparty या विक्रेता स्क्रिप्ट को अद्यतन नहीं कर रहा है। आप इसे ऊपर जोड़ सकते हैं <script src = "bootstrap.js">

— सीज़री डैनियल नोवाक

मैं वास्तव में आपको समझ नहीं पा रहा हूँ, फिर एक-लाइनर ही क्यों, एक जैसा window.Tether = window.Tether || {};? इसके अलावा, आपके समाधान में चेतावनी है, कि यह वैश्विक दायरे में पहले से ही परिभाषित निर्भरता को मिटा सकता है, अगर आपकी चीज़ को निष्पादित करने से पहले मॉड्यूल लोड किया जाएगा।

— फ़ारसाइड

यह बूटस्ट्रैप के एक अल्फा संस्करण के लिए हैक है। मुझे पिकी होने का कारण नहीं दिखता है। अगर डेवलपर टीथर का उपयोग नहीं करना चाहता है, तो पहले से परिभाषित निर्भरता को मिटा देना कोई मामला नहीं है। और मेरी राय window.Tether = window.Tether || {};में इससे भी बदतर है क्योंकि यह Tether is not a functionसार्थक त्रुटि के बजाय फेंक देगा ।

— सेज़री डैनियल नोवाक

Answer 5

यदि आप त्रुटि संदेश से बचना चाहते हैं और आप बूटस्ट्रैप टूल युक्तियों का उपयोग नहीं कर रहे हैं, तो आप बूटस्ट्रैप को लोड करने से पहले विंडो को परिभाषित कर सकते हैं।

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

Comments

यह मेरे लिए अच्छी तरह से काम किया ... मेरे मामले में मैं बूटस्ट्रैप के साथ कोणीय का उपयोग कर रहा हूं। धन्यवाद!

— मिज़किटा

काम किया, मैंने अपनी फ़ाइल में समान जोड़ा, यह अब ठीक काम कर रहा है। इस विचार के लिए धन्यवाद। window.Tether = {}; define(['tether'], function (Tether) { return window.Tether = Tether; });

— एहसान आगै

Answer 6

आपको मेरी गाइडलाइन करनी चाहिए:
1. Gemfile में bellow स्रोत जोड़ें

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

2. चलाने के आदेश:

   बंडल स्थापित करें

3. Application.js में jQuery के बाद इस लाइन को जोड़ें।

   // = jquery की आवश्यकता है
   // = tether की आवश्यकता है

4. रीस्टार्ट सर्वर को पुनः आरंभ करें।

Answer 7

Npm के माध्यम से नीचे की तरह टीथर स्थापित करें

npm install tether --save-dev

फिर नीचे दिए गए बूटस्ट्रैप के ऊपर अपने html में tether जोड़ें

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

Comments

या इस तरह से बोवरbower install tether --save-dev

— फ़ारसाइड

npm install tether --saveइसके बजाय नहीं होना चाहिए --save-dev? उत्पादन में भी इसकी जरूरत होगी।

— सियानोनोन

Answer 8

वेबपैक के लिए मैंने इसके साथ हल किया webpack.config.js:

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

Answer 9

एक अतिरिक्त नोट। यदि आप असम्पीडित जावास्क्रिप्ट फ़ाइल की जाँच करते हैं, तो आपको यह शर्त मिलेगी:

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

Answer 10

वेबपैक का उपयोग करते हुए मैंने इसमें प्रयोग किया 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/)');
  }

Comments

धन्यवाद कि काम किया, मैं सुझाव दूंगा कि आप अप्रयुक्त लाइन को हटाने के लिए अपने उत्तर को संपादित करेंtether: 'tether',

— ghiscoding

आप सही हैं, लेकिन एक उदाहरण के रूप में मुझे लगता है कि यह इस तथ्य को दर्शाता है कि सटीक नामकरण की आवश्यकता है।

— हेनरी

Answer 11

मैं इस मुद्दे के साथ नवीनतम बूस्टर 4 बिल्ड का उपयोग करते हुए आवश्यकता पड़ रहा था। मैंने केवल परिभाषित किया:

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

मेरे html हेड टैग में बूटस्ट्रैप की जांच को मूर्ख बनाने के लिए। फिर मैंने अपने ऐप को लोड करने से पहले एक दूसरा आवश्यकता बयान जोड़ा, और बाद में, मेरा बूटस्ट्रैप निर्भरता:

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

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

अग्रानुक्रम में इन दोनों का उपयोग करना और आपको वर्तमान बूटस्ट्रैप 4 अल्फा बिल्ड का उपयोग करने में कोई समस्या नहीं होनी चाहिए।

Answer 12

जनरेटर-एस्पनेटकोर-स्पा और बूटस्ट्रैप 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)
            ...
        ]
};

Comments

केवल तीन: ... नया वेबपैक। ProvidePlugin ({$: 'jquery', jQuery: 'jquery', Tether: 'tether'}), ...

— Mentor

Answer 13

वेब पैक 1 या 2 के लिए बूटस्ट्रैप 4 की आपको आवश्यकता है

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

Answer 14

यदि आप ब्रंच का उपयोग कर रहे हैं, तो आप इसे अपने अंत में जोड़ सकते हैं brunch-config.js:

npm: {
    enabled: true,
    globals: {
        $: 'jquery', jQuery: 'jquery', 'Tether': 'tether'
    }
}

Answer 15

यदि आप आवश्यकता का उपयोग करते हैं। जेएम 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']);
});

Comments

इससे मुझे वास्तव में मदद मिली। मैं उम्र के लिए इस पर अटक गया था - आपको यह एहसास नहीं था कि आप कॉल की आवश्यकता कर सकते हैं। अपवोट फॉर यू, सर।

— grimdog_john

Answer 16

आपके लिए Laravel मिक्स यूजर्स बूटस्ट्रैप 4 को चला रहे हैं, आपको दौड़ने की आवश्यकता होगी

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

Answer 17

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

Answer 18

और अगर वेबपैक का उपयोग कर रहे हैं, तो आपको एक्सपोजर प्लगइन की आवश्यकता होगी। अपने webpack.config.js में, इस लोडर को जोड़ें

{
   test: require.resolve("tether"),
   loader: "expose?$!expose?Tether"
}

Answer 19

मुझे भी यही समस्या थी और मैंने इसे हल किया। मैं 5.1.0rc1 रेल पर हूँ

अपने आवेदन के अंदर jquery और tether की आवश्यकता जोड़ने के लिए सुनिश्चित करें। जेएस फ़ाइल वे इस तरह बहुत शीर्ष पर होना चाहिए

//= require jquery
//= require tether

बस सुनिश्चित करें कि टीथर स्थापित है

Answer 20

विधि # 1 : यहां से डाउनलोड करें और इसे अपनी परियोजनाओं में डालें, या
विधि # 2 : अपने बूटस्ट्रैप स्क्रिप्ट स्रोत से पहले नीचे दिए गए कोड का उपयोग करें:

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

Answer 21

मैं बूटस्ट्रैप 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">

समापन टैग से ठीक पहले, अपने जावास्क्रिप्ट प्लगइन्स, jQuery और टीथर को अपने पृष्ठों के अंत में जोड़ें। हमारे कोड पर निर्भर करता है, क्योंकि 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>

Answer 22

UMD / AMD समाधान

उन लोगों के लिए, जो इसे यूएमडी के माध्यम से कर रहे हैं , और इसके माध्यम से संकलन करते हैं 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']       
}

---

युपीडी: में बूटस्ट्रैप 4.1 स्थिर वे प्रतिस्थापित टिथर , साथ Popper.js , देख के उपयोग पर प्रलेखन ।

Answer 23

मुझे भी यही समस्या थी और मैंने jquery-3.1.1.min को किसी भी js को शामिल करने से पहले इसे हल किया और यह एक आकर्षण की तरह काम करता था। आशा करता हूँ की ये काम करेगा।