javascript - que - Cómo arreglar el error; ''Error: la información sobre herramientas de Bootstrap requiere Tether(http://github.hubspot.com/tether/)''

tether npm

Question

Estoy usando Bootstrap V4 y el siguiente error se registra en la consola;

Error: la información sobre herramientas de Bootstrap requiere Tether ( http://github.hubspot.com/tether/ )

He intentado eliminar el error instalando Tether pero no ha funcionado. He ''instalado'' Tether incluyendo las siguientes líneas 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>

¿He ''instalado'' la correa correctamente?

¿Alguien puede ayudarme a eliminar este error?

Si desea ver el error en mi sitio, haga clic aquí y cargue su consola.

Answer 1

Solución UMD / AMD

Para aquellos tipos que lo hacen a través de UMD y compilan a través de require.js , existe una solución lacónica.

En el módulo, que requiere tether como la dependencia, que carga información sobre Tooltip como UMD, frente a la definición del módulo, simplemente ponga un fragmento corto en la definición 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
    */
    //...
});

Este breve fragmento al principio, en realidad, puede colocarse en cualquier nivel superior de su aplicación, lo más importante: invocarlo antes del uso real de los componentes de bootstrap con dependencia de 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: en Boostrap 4.1 Stable reemplazaron Tether , con Popper.js , consulte documentation .

Answer 2

Para Bootstrap 4 estable:

Dado que Beta Bootstrap 4 no depende de Tether sino de Popper.js . Todos los scripts ( deben estar en este orden):

<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 la documentation actual para las versiones de script más recientes.

Solo Bootstrap 4 alpha:

Bootstrap 4 alpha necesita Tether , por lo que debe incluir tether.min.js antes de incluir bootstrap.min.js , por ejemplo.

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

Answer 3

Deberías hacer mi pauta:
1. Añadir fuente de abajo en Gemfile

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

2. Ejecutar comando:

   paquete de instalación

3. Agregue esta línea después de jQuery en application.js.

   // = requiere jquery
   // = requiere atadura

4. Reinicie el servidor de rails.

Answer 4

Estaba teniendo este problema con requirejs usando la nueva versión boostrap 4. Terminé simplemente definiendo:

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

en mi etiqueta de cabeza html para engañar el cheque de bootstrap. Luego agregué una segunda declaración require justo antes del require que carga mi aplicación y, posteriormente, mi dependencia bootstrap:

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

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

Usando ambos en tándem y no debería tener ningún problema con el actual bootstrap 4 alpha build.

Answer 5

Funciona para generator-aspnetcore-spa y 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)
            ...
        ]
};

Answer 6

Instale la correa a través de npm como a continuación

npm install tether --save-dev

luego agregue la correa a su html arriba de bootstrap como a continuación

<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="jspm_packages/github/twbs/[email protected]/js/bootstrap.js"></script>

Answer 7

Para agregar a la respuesta de @ adilapapaya. Para usuarios de ember-cli específicamente, instale la tether con

bower install --save tether

y luego ember-cli-build.js archivo ember-cli-build.js antes de bootstrap, así:

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

Para el paquete web 1 o 2 con Bootstrap 4 necesitas

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

Answer 9

Para los usuarios de Laravel Mix que ejecutan Bootstrap4, deberá ejecutar

npm installer tether --save

Luego actualice los resources/assets/js/bootstrap.js para cargar Tether y llevarlo al objeto de la ventana.

Así es como se ve el mío: (Tenga en cuenta que también tuve que ejecutar npm install popper.js --save )

window.$ = window.jQuery = require(''jquery'');
window.Popper = require(''popper.js'').default;
window.Tether = require(''tether'');
require(''bootstrap'');

Answer 10

Para webpack resolví esto con webpack.config.js :

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

Answer 11

Personalmente, utilizo un pequeño subconjunto de la funcionalidad Bootstrap y no necesito conectar Tether.

Esto debería ayudar:

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

Answer 12

Recomiendo seguir las instrucciones en la documentación de Bootstrap 4 :

Copie y pegue la hoja de estilo <link> en su <head> antes de todas las otras hojas de estilo para cargar nuestro 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">

Agregue nuestros complementos de JavaScript, jQuery y Tether cerca del final de sus páginas, justo antes de la etiqueta de cierre. Asegúrese de colocar jQuery y Tether primero, ya que nuestro código depende de ellos. Si bien utilizamos la construcción delgada de jQuery en nuestros documentos, la versión completa también es compatible.

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

Si desea evitar el mensaje de error y no está utilizando la información sobre herramientas de Bootstrap, puede definir window.Tether antes de cargar Bootstrap.

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

Answer 14

Si está utilizando Brunch, puede agregar esto al final de su brunch-config.js :

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

Answer 15

Si está utilizando npm y browserify:

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

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

Answer 16

Si estás usando Webpack:

1. Configure el cargador de arranque como se describe en los documentos;
2. Instale tether.js a través de npm;
3. Agregue tether.js al complemento ProvidePlugin del paquete web.

webpack.config.js:

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

Source

Answer 17

Si usa require.js AMD loader:

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

Answer 18

Tuve el mismo problema y así es como lo resolví. Estoy sobre rieles 5.1.0rc1

Asegúrese de agregar requieren jquery y tether dentro de su archivo application.js, deben estar en la parte superior de esta manera

//= require jquery
//= require tether

Solo asegúrate de tener la correa instalada

Answer 19

Tuve el mismo problema y lo resolví incluyendo jquery-3.1.1.min antes de incluir cualquier js y funcionó de maravilla. Espero eso ayude.

Answer 20

Una nota adicional Si marca el archivo JavaScript sin comprimir, encontrará la condición:

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

Entonces el mensaje de error contiene la información requerida.

Puede descargar el archivo desde ese http://github.hubspot.com/tether/ .

Versión sin comprimir:

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

Answer 21

Usando webpack usé esto en webpack.config.js :

var plugins = [

    ...

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

Parece que Tether era el que estaba buscando:

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

Answer 22

Y si usa webpack, necesitará el complemento de exposición. En su webpack.config.js, agregue este cargador

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

Answer 23

Método 1 : descargue desde Here e insértelo en sus proyectos, o
Método # 2 : use el código a continuación antes de la fuente del script bootstrap:

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