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

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.

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>

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

Se você estiver usando o npm e o browserify:

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

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

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

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>

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

2. Comando de execução:

   instalação do pacote

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

   // = requer jquery
   // = requer tether

4. Reinicie o servidor Rails.

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>

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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>

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>

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 .

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.