Bootstrap tooltip no es una función, Popper no trabaja

Question

Estoy tratando de utilizar módulos separados de bootstrap en mi sitio web en lugar de incluir todo el archivo minificado. Pero estoy flipando, ¿por qué es tan complicado? ¿O estoy complicando esto?  devDependencies : {  exports- loader :  1.1.1 ,  webpack :  4.39.2 ,  uglify-js :  3.6.0 , },  dependencies : {  bootstrap :  4.3.1 ,  jquery :  3.4.1 ,  popper.js :  1.14.7 , } custom bootstrap.js in /js /* Tries: import $ from 'jquery'; import 'popper.js'; import 'popper.js/dist/umd/popper.js'; import 'popper.js/dist/umd/popper.min.js'; import 'bootstrap/dist/js/bootstrap.min.js'; */ window.jQuery = $; window.$ = $; global.$ = $; /* BOOTSTRAP CUSTOM IMPORTS */ import 'bootstrap/js/dist/util'; import 'bootstrap/js/dist/alert'; import 'bootstrap/js/dist/button'; import 'bootstrap/js/dist/collapse'; import 'bootstrap/js/dist/dropdown'; import 'bootstrap/js/dist/modal'; import 'bootstrap/js/dist/tooltip'; import 'bootstrap/js/dist/popover'; import 'bootstrap/js/dist/tab'; Con eso, mi código compila con éxito pero en la consola cromo aparece este error Uncaught TypeError: $(...).tooltip is not a function Si incluyo esto en mi webpack.config.js: new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery', 'window.jQuery': 'jquery/src/jquery', Popper: ['popper.js', 'default'], }), El error de tooltip se ha ido, pero comienza a cometer errores en otras libs, como: //Error on chrome console Uncaught TypeError: $(...).mask is not a function Mi orden de carga de JS es: LIBS (A WEBPACK MERGED FILE WITH ALL OTHER LIBS, LIKE JQUERY, MASKS, SLICK...) BOOTSTRAP POLYFILL Búsqueda de Internet Veo que mucha gente está experimentando este problema pero las soluciones que presentan no están trabajando para mí. Por favor, ¿alguien puede ayudarme?

quantumcoderd26d · Accepted Answer

Gracias por las respuestas.

Me di cuenta de lo que está pasando, no realmente entender por qué pero, las importaciones de bootstrap con JQuery estaban causando conflictos en el uso de jquery por plugins, así que, tuve que eliminar jquery importado de archivo bootstrap e incluir manualmente en otro proceso de archivo de plugins, así:

/* BOOTSTRAP.js CUSTOM IMPORTS */
//removed jquery imports
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
...

webpack.config:

    //I had to maintain that provider
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      Popper: ['popper.js', 'default'],
    }),
    new MergeIntoSingleFilePlugin({
      files: {
        "js/libs.base.js": [
          //included jquery min file on merge of plugins
          path.join(source, 'src/libs/jquery', 'jquery-3.4.1.min.js'),
          path.join(source, 'src/libs/jquery-mask', 'jquery.mask.min.js'),
          ...

Respondida el Dec 18, 2020 a las 00:38 - por quantumcoderd26d

debugduke · Answer

Creo que esto puede ayudar. // TOOLTIP PLUGIN DEFINITION // ========================= var old = $.fn.tooltip $.fn.tooltip = function (option) { return this.each(function () { var $this = $(this) var data = $this.data('bs.tooltip') var options = typeof option == 'object' && option if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options))) if (typeof option == 'string') data[option]() })

Gpt · Answer

El problema que estás experimentando es común cuando intentas cargar módulos de Bootstrap de forma separada y estar seguro de que las dependencias están configuradas correctamente en tu proyecto. Aquí hay algunas sugerencias que pueden ayudarte a resolver este problema:

Asegúrate de que Popper.js se esté cargando antes que Bootstrap, ya que Bootstrap depende de Popper.js para algunas funcionalidades, como por ejemplo, los tooltips y los popovers. Puedes reorganizar el orden de carga de tus archivos JS para asegurarte de que Popper.js se cargue antes que Bootstrap.

En tu archivo de configuración de Webpack, en lugar de importar jQuery y Popper.js dentro de tu código personalizado de Bootstrap, intenta configurar el plugin ProvidePlugin de Webpack de la siguiente manera:

javascript
new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  Popper: ['popper.js', 'default']
}),

De esta manera, cada vez que Webpack encuentra alguna referencia a $, jQuery o Popper en tu código, automáticamente los importará.

Asegúrate de que estás importando correctamente los archivos necesarios de Bootstrap. Algunas veces los módulos separados de Bootstrap pueden requerir archivos adicionales que podrían no estar incluidos en tu configuración actual.

Revisa la documentación de Bootstrap para asegurarte de que estás importando los módulos necesarios de la forma correcta.

Recuerda que es importante seguir las mejores prácticas al cargar dependencias en tu proyecto y estar al tanto de las interdependencias entre las diferentes librerías que estás utilizando. Espero que estas sugerencias te ayuden a solucionar el error y a que puedas utilizar Bootstrap de forma modular en tu sitio web. ¡Buena suerte!

Respondida el Dec 19, 2020 a las 00:40 - por Gpt

Gemini · Answer

Posible solución: El error  Uncaught TypeError: $(...).tooltip is not a function  sugiere que el script bootstrap.js no se está cargando correctamente. Esto podría deberse a un problema con el orden de carga o con la configuración de Webpack. Pasos para resolver el problema: Verifica el orden de carga: Asegúrate de que el script `bootstrap.js` se está cargando después de jQuery y Popper.js. Actualiza Webpack: Actualiza a la última versión de Webpack (actualmente 5.76.0). Comprueba la configuración de Webpack: Asegúrate de que estás cargando los módulos de Bootstrap correctamente utilizando la función `ProvidePlugin` de Webpack. Intenta utilizar la siguiente configuración: new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery', 'window.jQuery': 'jquery/src/jquery', Popper: ['popper.js', 'default'], Tooltip: ['bootstrap/js/dist/tooltip', 'default'], Popover: ['bootstrap/js/dist/popover', 'default'], }), Limpia la caché del navegador: Limpia la caché del navegador para asegurarte de que estás cargando los archivos JavaScript más recientes. Alternativamente, puedes intentar: Utilizar el archivo bootstrap.min.js en lugar de los archivos individuales. Incluir el archivo popper.min.js directamente en tu HTML. Utilizar un gestor de paquetes como npm o yarn para instalar y gestionar los módulos de Bootstrap. Nota:* El uso de módulos separados de Bootstrap puede ser más complicado que utilizar el archivo minificado. Si sigues teniendo problemas, considera utilizar el archivo bootstrap.min.js para simplificar el proceso.

Bootstrap tooltip no es una función, Popper no trabaja

4 Respuestas: