วิธีแก้ไขข้อผิดพลาด; 'ข้อผิดพลาด: เคล็ดลับเครื่องมือ Bootstrap ต้องใช้ Tether (http://github.hubspot.com/tether/)'


176

ฉันใช้ 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>

ฉันได้ติดตั้ง 'tether' ถูกต้องแล้วหรือยัง

ทุกคนสามารถช่วยฉันลบข้อผิดพลาดนี้ได้หรือไม่

หากคุณต้องการดูข้อผิดพลาดในเว็บไซต์ของฉันโปรดคลิกที่นี่และโหลดคอนโซลของคุณ


สวัสดีคุณสามารถโพสต์รหัสที่คุณใช้? จะดีกว่าถ้าคุณสามารถใส่รหัสใน jsfiddle หรือที่อื่น
kucing_terbang

ไม่มีรหัสจริงที่จะโพสต์ แต่ถ้าคุณเยี่ยมชม www.atlasestateagents.co.uk และดูคอนโซลคุณจะเห็นข้อผิดพลาดจาวาสคริปต์?
Michael LB

ฉันใช้รหัสที่แน่นอนเหล่านี้และพวกเขาลบข้อผิดพลาดสำหรับฉันใน V3 สำหรับทุกคนที่สงสัยเกี่ยวกับรุ่นนั้น
วิลเลียม

@MichaelLB แทนที่จะเชื่อมโยงไปยังเว็บไซต์ของคุณฉันขอแนะนำให้วางโค้ดขนาดสั้นไว้ที่นี่ภายในคำถามตัวเองเว็บไซต์ของคุณจะได้รับการอัปเดตและจะสูญเสียความเป็นจริง
Farside

คำตอบ:


239

สำหรับ Bootstrap 4 เสถียร:

ตั้งแต่เบต้า Bootstrap 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>

ดูเอกสารปัจจุบันสำหรับเวอร์ชันสคริปต์ล่าสุด


Bootstrap 4 ตัวเท่านั้น:

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>

1
แก้ไขขอบคุณ! อย่างไรก็ตามการแก้ไขที่นำไปสู่คำเตือนใหม่อาจเป็นคำถามใหม่หรือไม่ 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'
Michael LB

ที่ดี! ฉันคิดว่าข้อผิดพลาดที่คุณได้รับมาจากbootstrap.min.jsห้องสมุด มันจะยังคงปรากฏขึ้นถ้าคุณแสดงความคิดเห็นมันออกมา ใช่ฉันจะโพสต์คำถามใหม่ถ้า Google ไม่มีทางออก :)
adilapapaya

พิจารณาใช้ npmcdn เพื่อลิงก์ไปยังแพ็คเกจที่เผยแพร่ใน npm เนื่องจากบางคนมักจะลบไฟล์ build / dist ออกจาก github https://npmcdn.com/tether@1.2.4/dist/และhttps://npmcdn.com/bootstrap@4.0.0-alpha.2/dist/
eddywashere

2
แต่แปลกv4-alpha.getbootstrap.comไม่พูดอะไรเกี่ยวกับมัน
Maksym Semenykhin

มันทำในเวอร์ชั่น aplha.3 เพิ่งมีข้อผิดพลาดนี้ ฉันเชื่อว่าขณะนี้มีการดาวน์โหลดโยงเป็นแพ็คเกจและไม่รวมอยู่ในอีกต่อไป ดังนั้นคุณจะต้องรวมสคริปต์นี้ด้วย
ทิม Vermaelen

19

หากคุณใช้ Webpack:

  1. ตั้งค่า bootstrap-loader ตามที่อธิบายไว้ในเอกสาร
  2. ติดตั้ง tether.js ผ่านทาง npm
  3. เพิ่ม tether.js ไปยังปลั๊กอินเว็บแพ็ค ProviderPlugin

webpack.config.js:

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

แหล่ง


นี่คือทั้งหมดที่คุณต้องการ ฉันทำสิ่งนี้และมันไม่ทำงาน
Henry

9
ดังที่ฉันได้กล่าวถึงปัญหา Github แล้ว Bootstrap เวอร์ชั่นใหม่ (เช่น 4.0.0-alpha.6) ตอนนี้กำลังมองหา "Tether" แทนที่จะเป็น "window.Tether"
ThePadawan

18

หากคุณใช้ npm และเบราว์เซอร์:

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

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

14

ส่วนตัวฉันใช้ชุดย่อยของฟังก์ชั่น Bootstrap และไม่จำเป็นต้องแนบ Tether

สิ่งนี้จะช่วย:

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

1
ดังนั้นคุณเสนออะไรเพื่อตัดเส้นเหล่านี้ ไม่ดีเนื่องจากคุณไม่ควรแก้ไขผู้ขายและlibs บุคคลที่สามมันจะป้องกันไม่ให้คุณทำการอัปเดตในภายหลัง หากคุณไม่ได้ใช้ส่วนประกอบ Bootstrap เหล่านี้อย่างที่คุณพูด - ทำไมคุณถึงต้องใช้ Tether ... ดังนั้นฉันจึงไม่เข้าใจคุณค่าของข้อมูลที่คุณป้อน
Farside

1
การเตือนการโยงแสดงขึ้นแม้ในกรณีที่คุณไม่ได้ใช้ฟังก์ชั่นการบูตที่ต้องใช้การปล่อยสัญญาณ โซลูชันของฉันซ่อนข้อความที่น่ารำคาญในคอนโซล
Cezary Daniel Nowak

2
และการเปลี่ยนแปลงนี้ไม่ได้อัพเดตสคริปต์ของ บริษัท อื่นหรือผู้ขาย คุณสามารถเพิ่มได้ด้านบน <script src = "bootstrap.js">
Cezary Daniel Nowak

ฉันไม่เข้าใจคุณจริง ๆ ทำไมไม่เพียงแค่ซับเดียวwindow.Tether = window.Tether || {};? นอกจากนี้ยังมีข้อแม้ในการแก้ปัญหาของคุณว่าสามารถลบการอ้างอิงที่กำหนดไว้แล้วในขอบเขตส่วนกลางหากโมดูลจะถูกโหลดก่อนที่จะดำเนินการสิ่งที่คุณ
Farside

5
นี่เป็นแฮ็คสำหรับ Bootstrap เวอร์ชันอัลฟ่า ฉันไม่เห็นเหตุผลที่จะจู้จี้จุกจิก :-) หากนักพัฒนาไม่ต้องการใช้ Tether การลบการอ้างอิงที่กำหนดไว้แล้วไม่ใช่กรณี และในความคิดของฉันwindow.Tether = window.Tether || {};แย่ลงเพราะมันจะโยนTether is not a functionแทนที่จะผิดพลาดที่มีความหมาย
Cezary Daniel Nowak

10

หากคุณต้องการหลีกเลี่ยงข้อความแสดงข้อผิดพลาดและคุณไม่ได้ใช้เคล็ดลับเครื่องมือ Bootstrap คุณสามารถกำหนด window.Tether ก่อนที่จะโหลด Bootstrap

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

มันใช้งานได้ดีสำหรับฉัน ... ในกรณีของฉันฉันใช้แองกูลาร์กับ bootstrap ขอบคุณ!
MizAkita

ใช้งานได้ฉันเพิ่มไฟล์เดิมลงไปมันทำงานได้ดีในตอนนี้ ขอบคุณสำหรับความคิดนี้ window.Tether = {}; define(['tether'], function (Tether) { return window.Tether = Tether; });
Ehsan Aghaei

8

คุณควรทำตามแนวทางของฉัน:
1. เพิ่มแหล่งร้องต่อไปยัง Gemfile

source 'https://rails-assets.org' do
  gem 'rails-assets-tether', '>= 1.1.0'
end
  1. เรียกใช้คำสั่ง:

    กำติดตั้ง

  2. เพิ่มบรรทัดนี้หลัง jQuery ใน application.js

    // = ต้องการ jquery
    // = ต้องการโยง

  3. รีสตาร์ทเซิร์ฟเวอร์ rails


7

ติดตั้งโยงผ่าน npm เหมือนด้านล่าง

npm install tether --save-dev

จากนั้นเพิ่มโยงไปยัง html ของคุณด้านบน bootstrap เช่นด้านล่าง

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

2
หรือซุ้มเช่นนี้bower install tether --save-dev
Farside

13
ไม่ควรที่จะเป็นnpm install tether --saveแทน--save-dev? มันจะถูกต้องการยังอยู่ในการผลิต
siannone

7

สำหรับ webpack ฉันแก้ไขด้วยwebpack.config.js:

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

5

หมายเหตุเพิ่มเติม หากคุณตรวจสอบไฟล์จาวาสคริปต์ที่ไม่ได้บีบอัดคุณจะพบกับเงื่อนไข:

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


3

ใช้ 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',
ghiscoding

คุณพูดถูก แต่เป็นตัวอย่างที่ฉันคิดว่ามันแสดงให้เห็นถึงความจริงที่ว่าต้องมีการตั้งชื่อที่แน่นอน
เฮนรี่

2

ฉันมีปัญหานี้กับ requirejs โดยใช้บูสแทปrap 4 รุ่นใหม่ล่าสุด ฉันสิ้นสุดเพียงกำหนด:

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

ในแท็ก html head ของฉันเพื่อตรวจสอบ bootstrap ของคนโง่ จากนั้นฉันก็เพิ่มคำสั่งที่ต้องการสองก่อนที่ความต้องการนั้นจะโหลดแอปของฉันและต่อมาการพึ่งพา bootstrap ของฉัน:

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

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

ใช้ทั้งสองอย่างควบคู่กันและคุณไม่ควรมีปัญหาในการใช้ bootstrap 4 alpha build ปัจจุบัน


2

ใช้สำหรับ 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)
            ...
        ]
};

มีเพียงสามเท่านั้น: ... webpack.ProvidePlugin ใหม่ ({$: 'jquery', jQuery: 'jquery', Tether: 'tether'}), ...
Mentor

1

สำหรับ webpack 1 หรือ 2 กับ Bootstrap 4 ที่คุณต้องการ

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

1

หากคุณกำลังใช้บรันช์คุณสามารถเพิ่มได้ในตอนท้ายของbrunch-config.js:

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

1

ถ้าคุณใช้โหลดเดอร์ 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']);
});

สิ่งนี้ช่วยฉันได้จริงๆ ฉันติดอยู่กับเรื่องนี้มานานแล้ว - ไม่รู้ว่าคุณสามารถวางสายที่ต้องการได้ โหวตขึ้นสำหรับคุณครับ
grimdog_john

1

สำหรับคุณผู้ใช้ 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');

0

หากต้องการเพิ่มคำตอบของ @ 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');

0

และหากใช้ webpack คุณจะต้องมีปลั๊กอินเปิดเผย ใน webpack.config.js ของคุณเพิ่มตัวโหลดนี้

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

0

ฉันมีปัญหาเดียวกันและนี่คือวิธีที่ฉันจะแก้ไข ฉันอยู่บนราง 5.1.0rc1

ตรวจสอบให้แน่ใจว่าการเพิ่มจำเป็นต้องมี jquery และ tether ในไฟล์ application.js ของคุณซึ่งจะต้องอยู่ด้านบนสุดเช่นนี้

//= require jquery
//= require tether

เพียงให้แน่ใจว่าได้ติดตั้งโยง


0

วิธีที่ # 1 : ดาวน์โหลดจากที่นี่และแทรกลงในโครงการของคุณหรือ
วิธีที่ # 2 : ใช้รหัสด้านล่างก่อนที่ซอร์สสคริปต์ bootstrap ของคุณ:

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

0

ฉันแนะนำให้ทำตามคำแนะนำในเอกสารประกอบ Bootstrap 4 :

คัดลอกวางสไตล์ชีท<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">

เพิ่มปลั๊กอิน JavaScript, jQuery และ Tether ของเราใกล้กับส่วนท้ายของหน้าเว็บของคุณก่อนหน้าแท็กปิด อย่าลืมวาง jQuery และ Tether ไว้ก่อนเนื่องจากโค้ดของเราขึ้นอยู่กับพวกเขา ในขณะที่เราใช้งาน build ที่เพรียวบางของ 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>

0

โซลูชัน UMD / AMD

สำหรับพวกที่กำลังทำมันผ่าน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'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:ใน Boostrap 4.1 Stable พวกเขาแทนที่โยงกับPopper.jsดูเอกสารเกี่ยวกับการใช้งาน


-2

ฉันมีปัญหาเดียวกันและฉันแก้ไขได้โดยการรวม jquery-3.1.1.min ก่อนที่จะรวม js ใด ๆ และมันทำงานเหมือนมีเสน่ห์ หวังว่ามันจะช่วย

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.