Como corrigir o erro; 'Erro: as dicas de ferramentas de inicialização exigem o Tether (http://github.hubspot.com/tether/)'

176

Estou usando o Bootstrap V4 e o seguinte erro é registrado no console;

Erro: as dicas de ferramentas de inicialização exigem o Tether ( http://github.hubspot.com/tether/ )

Tentei remover o erro instalando o Tether, mas ele não funcionou. Eu 'instalei' o Tether incluindo as seguintes linhas de código;

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

Eu 'instalei' o tether corretamente?

Alguém pode me ajudar a remover este erro?

Se você deseja visualizar o erro no meu site, clique aqui e carregue seu console.

Michael LB
fonte
Oi, você pode postar o código que você usa? seria melhor se você pudesse colocar o código em jsfiddle ou em outro lugar.
kucing_terbang
Não há código real para postar, mas se você visitar www.atlasestateagents.co.uk e visualizar o console, verá o erro do javascript?
Michael LB
Usei essas linhas de código exatas e elas removeram o erro para mim na V3, para quem se perguntasse sobre essa versão.
William
@MichaelLB, em vez de link para o seu site, eu recomendo colocar alguns trechos de código aqui, dentro da própria pergunta, se o seu site será atualizado e perderá a realidade.
Farside 21/03

Respostas:

239

Para o Bootstrap 4 estável:

Como o beta Bootstrap 4 não depende do Tether, mas do Popper.js . Todos os scripts ( devem estar nesta ordem):

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

Consulte a documentação atual para as versões mais recentes do script.


Somente Bootstrap 4 alfa:

O Bootstrap 4 alpha precisa do Tether , então você precisa incluir tether.min.js antes de incluir bootstrap.min.js, por exemplo.

<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/js/bootstrap.min.js"></script>
adilapapaya
fonte
1
Corrigido, obrigado! No entanto, corrigir isso levou a um novo aviso, talvez para uma nova pergunta? 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
Ótimo! Acho que o erro que você está recebendo vem da bootstrap.min.jsbiblioteca. Ainda aparece se você comentar. Sim, postaria uma nova pergunta se o Google não tivesse uma solução. :)
adilapapaya
Considere usar o npmcdn para vincular aos pacotes publicados no npm, pois algumas pessoas tendem a remover os arquivos build / dist do github. https://npmcdn.com/[email protected]/dist/ehttps://npmcdn.com/[email protected]/dist/
eddywashere
2
mas o seu estranho, v4-alpha.getbootstrap.com não diz nada sobre isso
Maksym Semenykhin
Faz na versão aplha.3. Só tive esse erro. Acredito que o tether agora é baixado como um pacote e não está mais incluído. Então você terá que incluir esse script também.
precisa
19

Se você estiver usando o Webpack:

  1. Configure o bootstrap-loader conforme descrito em docs;
  2. Instale o tether.js via npm;
  3. Inclua tether.js no plug-in ProvidePlugin do webpack.

webpack.config.js:

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

Fonte

Boneco de neve
fonte
É tudo o que você precisa. Estou fazendo isso e não está funcionando.
Henry
9
Como mencionei na edição do Github, as versões mais recentes do Bootstrap (por exemplo, 4.0.0-alpha.6) agora estão procurando "Tether" em vez de "window.Tether".
ThePadawan
18

Se você estiver usando o npm e o browserify:

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

// require
global.Tether = require('tether');
Jannic Beck
fonte
14

Pessoalmente, uso um pequeno subconjunto da funcionalidade Bootstrap e não preciso anexar o Tether.

Isso deve ajudar:

window.Tether = function () {
  throw new Error('Your Bootstrap may actually need Tether.');
};
Cezary Daniel Nowak
fonte
1
Então, o que você propõe, cortar essas linhas? não é bom, como você não deve modificar fornecedores e bibliotecas de terceiros , isso impedirá que você faça atualizações mais tarde. Se você não usa esses componentes do Bootstrap como você diz - por que você precisaria do Tether ... para que eu não esteja realmente entendendo o valor da sua entrada.
Farside
1
O aviso do Tether é exibido mesmo, se você não usar a funcionalidade de inicialização que requer o Tether. Minha solução oculta mensagens irritantes no console.
Cezary Daniel Nowak
2
E essa alteração não está atualizando os scripts de terceiros ou de fornecedores. Você pode adicioná-lo acima <script src = "bootstrap.js">
Cezary Daniel Nowak
Eu realmente não te entendo, por que não apenas uma linha então window.Tether = window.Tether || {};? Além disso, há uma ressalva em sua solução, de que ela pode limpar a dependência já definida em um escopo global, se o módulo for carregado antes de sua execução.
Farside
5
Isso é hack para uma versão alfa do Bootstrap. Não vejo razão para ser exigente :-) Se o desenvolvedor não quiser usar o Tether, a limpeza da dependência já definida não é o caso. E na minha opinião window.Tether = window.Tether || {};é pior, porque vai jogar Tether is not a function, em vez de erro significativo.
Cezary Daniel Nowak
10

Se você deseja evitar a mensagem de erro e não está usando as dicas da ferramenta Bootstrap, é possível definir window.Tether antes de carregar o Bootstrap.

<script>
  window.Tether = {};
</script>
<script src="js/bootstrap.min.js"></script>
Donald Rich
fonte
Isso funcionou bem para mim ... no meu caso, estou usando angular com bootstrap. Obrigado!
MizAkita
Funcionou, eu adicionei mesmo no meu arquivo, está funcionando bem agora. Obrigado por esta ideia. window.Tether = {}; define(['tether'], function (Tether) { return window.Tether = Tether; });
Ehsan Aghaei
8

Você deve
seguir minha orientação: 1. Adicione a fonte abaixo ao Gemfile

source 'https://rails-assets.org' do
  gem 'rails-assets-tether', '>= 1.1.0'
end
  1. Comando de execução:

    instalação do pacote

  2. Adicione esta linha após o jQuery em application.js.

    // = requer jquery
    // = requer tether

  3. Reinicie o servidor Rails.

Quy Le
fonte
7

Instale o tether via npm como abaixo

npm install tether --save-dev

adicione o tether ao seu html acima da inicialização, como abaixo

<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="jspm_packages/github/twbs/[email protected]/js/bootstrap.js"></script>
cjfarrelly
fonte
2
ou caramanchão como estebower install tether --save-dev
Farside 21/03
13
Não deveria ser em npm install tether --savevez de --save-dev? Será necessário também na produção.
siannone
7

Para o webpack, resolvi isso com webpack.config.js:

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

Uma nota adicional. Se você verificar o arquivo javascript descompactado, encontrará a condição:

if(window.Tether === undefined) {
     throw new Error('Bootstrap tooltips require Tether (http://github.hubspot.com/tether)')
}

Portanto, a mensagem de erro contém as informações necessárias.

Você pode baixar o arquivo a partir desse link .

Versão não compactada:

https://rawgit.com/HubSpot/tether/master/src/js/tether.js https://rawgit.com/HubSpot/tether/master/dist/css/tether.css

Anton Lyhin
fonte
3

Usando o webpack, usei isso em webpack.config.js:

var plugins = [

    ...

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

Parece que Tetherele estava procurando:

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/)');
  }
Henry
fonte
Graças que trabalharam, eu sugiro que você editar a sua resposta para remover a linha não utilizadotether: 'tether',
ghiscoding
Você está certo, mas como exemplo, acho que ilustra o fato de que é necessária uma nomeação exata.
Henry
2

Eu estava tendo esse problema com requirejs usando a versão mais recente do boostrap 4. Acabei definindo:

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

na minha tag html head para enganar o cheque do bootstrap. Em seguida, adicionei uma segunda instrução require imediatamente antes da exigência de carregamento do meu aplicativo e, posteriormente, da minha dependência de autoinicialização:

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

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

Usando os dois em conjunto e você não deve ter problemas ao usar a versão atual do bootstrap 4 alpha.

Throttlehead
fonte
2

Funciona para o gerador-aspnetcore-spa e o 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)
            ...
        ]
};
Vladimir
fonte
Suficiente apenas três: ... new webpack.ProvidePlugin ({$: 'jquery', jQuery: 'jquery', Tether: 'tether'}), ...
Mentor
1

Para o webpack 1 ou 2 com o Bootstrap 4, você precisa

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

Se você estiver usando o Brunch, poderá adicioná-lo no final do seu brunch-config.js:

npm: {
    enabled: true,
    globals: {
        $: 'jquery', jQuery: 'jquery', 'Tether': 'tether'
    }
}
Ege Ersoz
fonte
1

Se você usar o carregador AMD require.js:

// 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']);
});
Lukas Pierce
fonte
Isso realmente me ajudou. Fiquei preso por muito tempo - não sabia que era possível aninhar as chamadas necessárias. Voto positivo para você, senhor.
precisa saber é o seguinte
1

Para os usuários do Laravel Mix executando o Bootstrap4, você precisará executar

npm installer tether --save

Atualize você resources/assets/js/bootstrap.jspara carregar o Tether e trazê-lo para o objeto de janela.

Aqui está o que o meu se parece: (Note que eu também tive que correr npm install popper.js --save)

window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
window.Tether = require('tether');
require('bootstrap');
zeros-e-uns
fonte
0

Para adicionar à resposta de @ adilapapaya. Para ember-cliusuários especificamente, instale tethercom

bower install --save tether

e inclua-o no seu ember-cli-build.jsarquivo antes da inicialização, da seguinte maneira:

// 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');
wuher
fonte
0

E se você estiver usando o webpack, precisará do plug-in de exposição. No seu webpack.config.js, adicione este carregador

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

Eu tive o mesmo problema e foi assim que resolvi. Estou nos trilhos 5.1.0rc1

Certifique-se de adicionar requer jquery e tether dentro do arquivo application.js, pois eles devem estar no topo assim

//= require jquery
//= require tether

Apenas certifique-se de ter o tether instalado

Ruben Cruz
fonte
0

Método 1 : Faça o download daqui e insira-o em seus projetos ou
Método 2 : use o código abaixo antes da fonte do script de inicialização:

<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
Hamid
fonte
0

Eu recomendo seguir as instruções na documentação do Bootstrap 4 :

Copie e cole a folha de estilo <link>no seu <head>antes de todas as outras folhas de estilo para carregar nosso 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">

Adicione nossos plugins JavaScript, jQuery e Tether perto do final de suas páginas, logo antes da tag de fechamento. Certifique-se de colocar o jQuery e o Tether primeiro, pois nosso código depende deles. Enquanto usamos a compilação fina do jQuery em nossos documentos, a versão completa também é suportada.

<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>
CodeBiker
fonte
0

Solução UMD / AMD

Para aqueles caras que fazem isso através do UMD e compilam via require.js, existe uma solução lacônica.

No módulo, que requer tethercomo dependência, que carrega Tooltipcomo UMD, na frente da definição do módulo, basta colocar um pequeno trecho na definição de 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
    */
    //...
});

Esse pequeno trecho no início, na verdade, pode ser colocado em qualquer nível mais alto do seu aplicativo, o mais importante - invocá-lo antes do uso real dos bootstrapcomponentes com Tetherdependência.

// ===== 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: No Boostrap 4.1 Stable, eles substituíram o Tether pelo Popper.js , consulte a documentação sobre o uso .

Farside
fonte
-2

Eu tive o mesmo problema e o resolvi incluindo jquery-3.1.1.min antes de incluir qualquer js e funcionou como um encanto. Espero que ajude.

Jakamollo
fonte