Bootstrap throws Uncaught Error Bootstrap s JavaScript requires jQuery

Question

I am trying to use Bootstrap to make an interface for a program  I added jQuery 1 11 0 to the  lt head gt  tag and thought that was that  but when I launch the web page in a browser jQuery reports an error   Uncaught Error  Bootstrap s JavaScript requires jQuery   I have tried using jQuery 1 9 0  I have tried with copies hosted on several CDNs  but I can t get it work  Can anybody point out what I m doing wrong

User · Answer

You need to add JQuery js before adding bootstrap js file  because BootStrap use jqueries function  So make sure to load first jquery js and then bootstap js file    lt  -- JQuery Core JavaScript -- gt   lt script src  app js jquery min js  gt  lt  script gt    lt  -- Bootstrap Core JavaScript -- gt   lt script src  app js bootstrap min js  gt  lt  script gt

User · Answer

Try this   Change the order of files it should be like below     lt script src  js jquery-1 11 0 min js  gt  lt  script gt   lt script src  js bootstrap min js  gt  lt  script gt   lt script src  js wow min js  gt  lt  script gt

User · Answer

You need to add JQuery before adding bootstrap-   lt  -- JQuery Core JavaScript -- gt   lt script src  lib js jquery min js  gt  lt  script gt    lt  -- Bootstrap Core JavaScript -- gt   lt script src  lib js bootstrap min js  gt  lt  script gt

User · Answer

If you re in a Browser-Only environment  use SridharR s solution   If you re in a Node CommonJS   Browser environment  e g  electron  node-webkit  etc     the reason for this error is that jQuery s export logic first checks for module  not window   if  typeof module      object   amp  amp  typeof module exports      object            CommonJS Node   else          window     Note that it exports itself via module exports in this case  so jQuery and   are not assigned to window     So to resolve this  instead of  lt script src  path to jquery js  gt  lt  script gt     Simply assign it yourself by a require statement    lt script gt      window jQuery   window     require  jquery     lt  script gt    NOTE  If your electron app does not need nodeIntegration  set it to false so you won t need this workaround

User · Answer

I m using NodeJS and got the same error  Like the other answers  the problem was also because JQuery needed to be loaded before Bootstrap  however  because of the NodeJS characteristics  this change had to be aplied in the pipeline js file   The change in pipeline js was like this   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        I m also using grunt to help  and it automatically changed the order in the main html page    lt  --SCRIPTS-- gt     lt script src   js dependencies angular 1 3 js  gt  lt  script gt     lt script src   js dependencies jquery js  gt  lt  script gt     lt script src   js dependencies bootstrap js  gt  lt  script gt     lt  -- other dependencies -- gt   lt  --SCRIPTS END-- gt    Hope it helps  You didn t said what your environment was  so I decided to post this answer

User · Answer

I had tried almost all the above methods    Finally fixed it by including the   script src    static  App js jquery js        just after loading the staticfiles i e    load staticfiles    in base html

User · Answer

If you are using require js than need to add  window     window jQuery   require  jquery   in app js  OR you can make dependent file load after parent file loaded   such as below concept   require config       baseUrl   scripts appScript       paths             jquery   jQuery jquery min            bootstrap   bootstrap bootstrap min             shim     shim             bootstrap    jquery                       kick start application     deps    app         Above code shown that bootstrap is dependent on Jquery so i have added in shim and make it dependent

User · Answer

You have provided wrong order for JAVASCRIPT and BOOTSTRAP   by convention bootstrap must follow jquery file definition   lt  -- JQuery Core JavaScript -- gt   lt script src  lib js jquery min js  gt  lt  script gt   lt script src  lib js jquery-ui min js  gt  lt  script gt   lt  -- Bootstrap Core JavaScript -- gt   lt script src  lib js bootstrap min js  gt  lt  script gt

User · Answer

On official docs  https   electronjs org docs faq i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron   lt head gt     lt script gt    window nodeRequire   require    delete window require    delete window exports    delete window module     lt  script gt     lt script type  text javascript  src  jquery js  gt  lt  script gt   lt  head gt

User · Answer

If your code looks good  verify that jQuery successfully loaded to your server  In my case  the jQuery files were published to the server by my IDE  but the web server only had a 0 KB file stub  With no content  the server failed to serve the file to the browser   After re-publishing the file and verifying that the server actually received the whole file  then my web page stopped giving me the error

User · Answer

In my case solution is really silly  and strange   Below code was pre-populated by  Layout cshtml file   NOT written by me    lt script src    Scripts jquery-1 10 2 min js  gt  lt  script gt   lt script src    Scripts bootstrap min js  gt  lt  script gt    But  when I verified in Scripts folder  jquery-1 10 2 min js was not even available  Hence  replaced code like below where jquery-1 9 1 min js is an existing file    lt script src    Scripts jquery-1 9 1 min js  gt  lt  script gt   lt script src    Scripts bootstrap min js  gt  lt  script gt

User · Answer

If this occurs IE intranet only  check compatibility settings and uncheck  Display intranet sites in Compatibility mode      IE-- settings-- compatibility

User · Answer

you should load jquery first because bootstrap use jquery features  like this    lt  doctype html gt   lt html gt       lt head gt           lt link type  text css  rel  stylesheet  src  css animate css  gt           lt link type  text css  rel  stylesheet  src  css bootstrap-theme min css  gt           lt link type  text css  rel  stylesheet  src  css bootstrap min css  gt           lt link type  text css  rel  stylesheet  href  css custom css  gt    lt  --   Shuffle your scripts HERE  -- gt           lt script src  js jquery-1 11 0 min js  gt  lt  script gt           lt script src  js bootstrap min js  gt  lt  script gt           lt script src  js wow min js  gt  lt  script gt   lt  --   End  -- gt               lt title gt pyMeLy Interface lt  title gt       lt  head gt       lt body gt           lt p class  title1  gt  lt strong gt pyMeLy lt  strong gt  lt  p gt           lt p class  title2  gt  lt em gt  A stylish way to view your media lt  em gt  lt  p gt           lt div style  text-align center   gt               lt button type  button  class  btn btn-primary  gt Movies lt  button gt               lt button type  button  class  btn btn-primary btn-lg  gt Large button lt  button gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

After struggling with this problem I took three steps    Use jQuery versions anywhere between 1 9 0 and 3 0 0 Declare the jQuery file before declaring the Bootstrap file Declare these two script files at the bottom of the  lt body gt  lt  body gt  tags   rather than in the  lt head gt  lt  head gt   These worked for me but there may be different behaviors based on the browser you are using

[jquery] Bootstrap throws Uncaught Error: Bootstrap's JavaScript requires jQuery

Examples related to jquery

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3