Bootstrap arroja Error no detectado: JavaScript de Bootstrap requiere jQuery [cerrado]

172

Estoy tratando de usar Bootstrap para hacer una interfaz para un programa. Agregué jQuery 1.11.0 a la <head>etiqueta y pensé que era eso, pero cuando abro la página web en un navegador, jQuery informa un error:

Uncaught Error: Bootstrap's JavaScript requires jQuery

He intentado usar jQuery 1.9.0, he intentado con copias alojadas en varios CDN, pero no puedo hacer que funcione. ¿Alguien puede señalar lo que estoy haciendo mal?

— Munim Munna
fuente

28

Incluir jQuery antes de Bootstrap ...

— Adriano Repetti

En mi caso, instalé jquery antes de bootstrap y luego funcionó bien. Solo incluir antes de bootstrap no resolvió el error.

— Stuti Verma

En mi caso, en lugar de agregar jquery en el pie de página (como en la plantilla de bootstrap); Lo agregué en el encabezado. Resuelve el problema.

— Adeel Raza Azeemi

1

simplemente agregue

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>

antes del script de importación bootstrap. Copie la última CDN aquí: cdnjs.com/libraries/jquery

— Tina Lee

373

Prueba esto

Cambie el orden de los archivos como debería ser a continuación.

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>

— Sridhar R
fuente

85

No funciona para mi ¡Tengo jQuery antes de Bootstrap y obtengo el error de todos modos!

— Verde

2

funcionó pero obtuvo una barra de desplazamiento horizontal en la parte inferior

— HimalayanCoder

1

Si no funciona a partir de esto ... puede ser que jQuery se instale a través de Bower y, por lo tanto, es posible que deba buscar en bower_components / jquery / dist / jquery.js ... la parte "dist" es lo que había pasado por alto.

— Jax Cavalera

Trabajó para mí para un proyecto Django-Oscar. Este error comienza a aparecer de la nada. Supongo que jugar con un código completamente no relacionado puede cambiar la secuencia de representación y desencadenar este error.

— MadPhysicist

aparentemente no me di cuenta que tengo bootstrap.js incluido dos veces - la primera vez fue mucho antes de la consulta

— JJ Roman

91

Si se encuentra en un entorno de solo navegador , use la solución de SridharR .

Si se encuentra en un entorno de navegador Node / CommonJS + (por ejemplo, electron, node-webkit, etc.); La razón de este error es que la lógica de exportación de jQuery primero busca module, no window:

if (typeof module === "object" && typeof module.exports === "object") {
    // CommonJS/Node
} else {
    // window
}

Tenga en cuenta que se exporta a través de module.exportsen este caso; así jQueryy $no están asignados a window.

Entonces, para resolver esto, en lugar de <script src="path/to/jquery.js"></script>;

Simplemente asignelo usted mismo mediante una requiredeclaración:

<script>
    window.jQuery = window.$ = require('jquery');
</script>

NOTA: Si su aplicación electrónica no necesita nodeIntegration, configúrela para falseque no necesite esta solución.

— Onur Yıldırım
fuente

3

window.jQuery = window.$ = require('jquery');esto funcionó para mí al intentar armar una compilación de brunch con jQuery 2 y Bootstrap 3. Sin embargo, solo me llevó varias horas encontrar su respuesta :(. ¿Este requisito cambia en versiones posteriores de jQuery?

— rikkit

1

No lo sé, pero como esto no es un error, no lo creo. Si su aplicación electrónica no necesita nodeIntegration, configúrela para falseque no necesite esta solución.

— Onur Yıldırım

1

Tienes que instalar jquery usando npm install jqueryno con bower.

— syodage

1

Útil para ver cómo el electrón trata con las bibliotecas de manera diferente a una aplicación basada en ventanas

— jwknz

Todavía no lo entiendo, pero Laravel usa el mismo enfoque: github.com/laravel/laravel/blob/v5.7.0/resources/js/…

— Ryan

14

primero debe cargar jquery porque bootstrap usa las funciones de jquery. Me gusta esto:

<!doctype html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" src="css/animate.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap-theme.min.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap.min.css">
        <link type="text/css" rel="stylesheet" href="css/custom.css">

<!--   Shuffle your scripts HERE  -->
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/wow.min.js"></script>
<!--   End  -->   

        <title>pyMeLy Interface</title>
    </head>
    <body>
        <p class="title1"><strong>pyMeLy</strong></p>
        <p class="title2"><em> A stylish way to view your media</em></p>
        <div style="text-align:center;">
            <button type="button" class="btn btn-primary">Movies</button>
            <button type="button" class="btn btn-primary btn-lg">Large button</button>
        </div>
    </body>
</html>

— 124
fuente

7

Debe agregar JQuery antes de agregar bootstrap-

<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>

— Vivek Panday
fuente

4

Ha proporcionado un pedido incorrecto para JAVASCRIPT y BOOTSTRAP

por convención bootstrap debe seguir la definición del archivo jquery

<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>
<script src="lib/js/jquery-ui.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>

— Mohit Singh
fuente

1

En mi caso, la solución es realmente tonta y extraña.

El siguiente código se rellenó previamente con el archivo _Layout.cshtml. (NO escrito por mí)

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

Pero, cuando verifiqué en la carpeta Scripts, jquery-1.10.2.min.js ni siquiera estaba disponible. Por lo tanto, el código reemplazado como a continuación donde jquery-1.9.1.min.js es un archivo existente:

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

— Ashok kumar
fuente

1

Estoy usando NodeJS y obtuve el mismo error. Al igual que las otras respuestas, el problema también se debía a que JQuery necesitaba cargarse antes de Bootstrap; sin embargo, debido a las características de NodeJS, este cambio tuvo que aplicarse en el archivo pipeline.js .

El cambio en pipeline.js fue así:

var jsFilesToInject = [
  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/angular.1.3.js',
  'js/dependencies/jquery.js',
  'js/dependencies/bootstrap.js',
  'js/dependencies/**/*.js',
];

También estoy usando grunt para ayudar, y cambió automáticamente el orden en la página principal html:

<!--SCRIPTS-->
  <script src="/js/dependencies/angular.1.3.js"></script>
  <script src="/js/dependencies/jquery.js"></script>
  <script src="/js/dependencies/bootstrap.js"></script>
  <!-- other dependencies -->
<!--SCRIPTS END-->

¡Espero eso ayude! No dijiste cuál era tu entorno, así que decidí publicar esta respuesta.

— Ernani
fuente

1

Si está utilizando, entonces require.jsnecesita agregar window.$ = window.jQuery = require('jquery')app.js

O bien, puede hacer que la carga del archivo dependiente se cargue después del archivo principal ... como en el siguiente concepto

require.config({
    baseUrl: "scripts/appScript",
    paths: {
        'jquery':'jQuery/jquery.min',
        'bootstrap':'bootstrap/bootstrap.min' 
    },
   shim
    shim: {
        'bootstrap':['jquery'],
        },

    // kick start application
    deps: ['app']
});

El código anterior que bootstrapse muestra depende de Jquerylo que he agregado shimy lo hago dependiente

— SantoshK
fuente

0

Si su código se ve bien, verifique que jQuery se haya cargado correctamente en su servidor. En mi caso, mi IDE publicó los archivos jQuery en el servidor, pero el servidor web solo tenía un stub de archivo de 0 KB. Sin contenido, el servidor no pudo entregar el archivo al navegador.

Después de volver a publicar el archivo y verificar que el servidor realmente recibió el archivo completo, mi página web dejó de darme el error.

— Zarepheth
fuente

0

Debe agregar JQuery js antes de agregar el archivo bootstrap js, porque BootStrap usa la función jqueries. Así que asegúrese de cargar primero jquery js y luego el archivo bootstap js.

<!-- JQuery Core JavaScript -->
<script src="app/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="app/js/bootstrap.min.js"></script>

— Jani Devang
fuente

0

Si esto ocurre solo en la intranet de IE, verifique la configuración de compatibilidad y desmarque "Mostrar sitios de intranet en modo de compatibilidad".

IE -> configuración -> compatibilidad

— Davut Gürbüz
fuente

0

En documentos oficiales: https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

<head>
  <script>
  window.nodeRequire = require;
  delete window.require;
  delete window.exports;
  delete window.module;
  </script>
  <script type="text/javascript" src="jquery.js"></script>
</head>

— Fabio Souza
fuente

1

Lo arreglé en angular.json con el código "" scripts ": [" node_modules / jquery / dist / jquery.min.js "," node_modules / bootstrap / dist / js / bootstrap.min.js "]"

— AntWo

0

Había probado casi todos los métodos anteriores.

Finalmente lo arreglé incluyendo el

script src="{%static 'App/js/jquery.js' %}"

justo después de cargar los archivos estáticos, es decir, {% load staticfiles %}en base.html

— kanika
fuente

0

Después de luchar con este problema, tomé tres pasos:

Use versiones de jQuery en cualquier lugar entre 1.9.0 y 3.0.0
Declare el archivo jQuery antes de declarar el archivo Bootstrap
Declare estos dos archivos de script en la parte inferior de las <body></body>etiquetas en lugar de en el <head></head>. Esto funcionó para mí, pero puede haber diferentes comportamientos según el navegador que esté utilizando.

— Karisno1
fuente