O Bootstrap lança Erro não capturado: O JavaScript do Bootstrap requer jQuery [fechado]

172

Estou tentando usar o Bootstrap para criar uma interface para um programa. Eu adicionei o jQuery 1.11.0 à <head>tag e pensei que era isso, mas quando inicio a página da web em um navegador, o jQuery relata um erro:

Uncaught Error: Bootstrap's JavaScript requires jQuery

Eu tentei usar o jQuery 1.9.0, tentei com cópias hospedadas em várias CDNs, mas não consigo fazê-lo funcionar. Alguém pode apontar o que estou fazendo de errado?

— Munim Munna
fonte

28

Incluem jQuery antes Bootstrap ...

— Adriano Repetti

No meu caso, instalei o jquery antes do bootstrap e, em seguida, funcionou bem. Apenas incluir antes do bootstrap não resolveu o erro.

— Stuti Verma

No meu caso, em vez de adicionar o jquery no rodapé (como no modelo de auto-inicialização); Eu adicionei no cabeçalho. Resolveu o problema.

— Adeel Raza Azeemi 14/04

1

basta adicionar

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

antes do script de importação de autoinicialização. Copie a CDN mais recente aqui: cdnjs.com/libraries/jquery

— Tina Lee

371

Tente isto

Altere a ordem dos arquivos, conforme abaixo.

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

85

Não funciona para mim. Eu tenho o jQuery antes do Bootstrap e recebo o erro de qualquer maneira!

— Verde

2

funcionado, mas tem uma barra de rolagem horizontal na parte inferior

— HimalayanCoder

1

Se não estiver funcionando com isso .. pode ser que o jQuery esteja instalado via Bower e, portanto, talvez seja necessário procurar em bower_components / jquery / dist / jquery.js .. a parte "dist" é o que eu havia ignorado.

— Jax Cavalera #

Trabalhou para mim para um projeto Django-Oscar. Este erro começou a aparecer do nada. Suponho que mexer com um código completamente não relacionado possa alterar a sequência de renderização e disparar esse erro.

— MadPhysicist

aparentemente eu não percebi que o bootstrap.js foi incluído duas vezes - a primeira vez que foi muito antes da consulta

— JJ Roman

91

Se você estiver em um ambiente somente para navegador , use a solução SridharR .

Se você estiver em um ambiente Node / CommonJS + Browser (por exemplo, elétron, node-webkit, etc.); o motivo desse erro é que a lógica de exportação do jQuery primeiro verifica module, não window:

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

Observe que ele se exporta via module.exportsneste caso; então jQuerye $não está atribuído a window.

Então, para resolver isso, em vez de <script src="path/to/jquery.js"></script>;

Basta atribuir você mesmo por uma requiredeclaração:

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

NOTA: Se o seu aplicativo de elétrons não precisar nodeIntegration, defina-o para falseque você não precise dessa solução alternativa.

— Onur Yıldırım
fonte

3

window.jQuery = window.$ = require('jquery');Isso funcionou para mim tentar montar uma compilação brunch com jQuery 2 e Bootstrap 3. Só me levou várias horas para encontrar a sua resposta embora :( Isso muda exigência em versões posteriores do jQuery.?

— rikkit

1

Eu não sei, mas como isso não é um bug, acho que não. Se seu aplicativo de elétrons não precisar nodeIntegration, defina-o para falseque você não precise dessa solução alternativa.

— Onur Yıldırım

1

Você precisa instalar o jquery usando npm install jquerynot with bower.

— syodage 17/09/16

1

Útil para ver app como elétrons ofertas com as bibliotecas diferentes do que uma janela com base

— jwknz

Eu ainda não entendo isso, mas Laravel usa a mesma abordagem: github.com/laravel/laravel/blob/v5.7.0/resources/js/...

— Ryan

14

você deve carregar o jquery primeiro porque o bootstrap usa os recursos do jquery. como isso:

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

7

Você precisa adicionar o JQuery antes de adicionar o 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
fonte

4

Você forneceu um pedido errado para JAVASCRIPT e BOOTSTRAP

por convenção, o bootstrap deve seguir a definição do arquivo 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
fonte

1

No meu caso, a solução é realmente boba e estranha.

O código abaixo foi preenchido previamente pelo arquivo _Layout.cshtml. (NÃO escrito por mim)

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

Mas, quando verifiquei na pasta Scripts, o jquery-1.10.2.min.js nem estava disponível. Portanto, código substituído como abaixo, onde jquery-1.9.1.min.js é um arquivo existente:

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

— Ashok kumar
fonte

1

Estou usando o NodeJS e recebi o mesmo erro. Como as outras respostas, o problema também ocorreu porque o JQuery precisava ser carregado antes do Bootstrap; no entanto, devido às características do NodeJS, essa alteração teve que ser aplicada no arquivo pipeline.js .

A mudança no pipeline.js foi assim:

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',
];

Também estou usando o grunhido para ajudar, e ele mudou automaticamente a ordem na página principal do 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 que ajude! Você não disse qual era o seu ambiente, então decidi postar esta resposta.

— Ernani
fonte

1

Se você estiver usando, é require.jsnecessário adicionar o window.$ = window.jQuery = require('jquery')app.js

OU você pode fazer o carregamento do arquivo dependente após o carregamento do arquivo pai. Como abaixo do conceito

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

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

Código acima mostrado que bootstrapé dependente, Jqueryentão eu adicionei shime o deixo dependente

— SantoshK
fonte

0

Se o seu código estiver bom, verifique se o jQuery foi carregado com sucesso no seu servidor. No meu caso, os arquivos jQuery foram publicados no servidor pelo meu IDE, mas o servidor Web tinha apenas um stub de arquivo de 0 KB. Sem conteúdo, o servidor falhou ao veicular o arquivo no navegador.

Depois de republicar o arquivo e verificar se o servidor realmente recebeu o arquivo inteiro, minha página da Web parou de me dar o erro.

— Zarepheth
fonte

0

Você precisa adicionar o JQuery js antes de adicionar o arquivo bootstrap js, porque o BootStrap usa a função jqueries. Portanto, certifique-se de carregar primeiro o arquivo jquery js e, em seguida, o boottap 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
fonte

0

Se isso ocorrer apenas na intranet do IE, verifique as configurações de compatibilidade e desmarque "Exibir sites da intranet no modo de compatibilidade".

IE -> configurações -> compatibilidade

— Davut Gürbüz
fonte

0

Em documentos oficiais: 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
fonte

1

Corrigi-o no angular.json com o código "" scripts ": [" node_modules / jquery / dist / jquery.min.js "," node_modules / bootstrap / dist / js / bootstrap.min.js "]"

— AntWo

0

Eu tinha tentado quase todos os métodos acima.

Finalmente, corrigi-lo incluindo o

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

logo após carregar os arquivos estáticos, ou seja, {% load staticfiles %}em base.html

— kanika
fonte

0

Depois de enfrentar esse problema, dei três passos:

Use as versões do jQuery entre 1.9.0 e 3.0.0
Declare o arquivo jQuery antes de declarar o arquivo Bootstrap
Declare esses dois arquivos de script na parte inferior das <body></body>tags e não no <head></head>. Isso funcionou para mim, mas pode haver comportamentos diferentes com base no navegador que você está usando.

— Karisno1
fonte