Meteor and Bootstrap doesn't work (Error: Bootstrap's JavaScript requires jQuery)


#1

I’m using Bootstrap 3 which I imported through the twbs:bootstrap package. It’s a simple program that is just displaying a countdown timer on the webpage (for the launch of my app).

However, I get the following error messages preventing me from starting Meteor:

Error: Bootstrap's JavaScript requires jQuery
at bootstrap/js/bootstrap.js:8:9
at /Users/andreaswest/Documents/workspace/landing/.meteor/local/build/programs/server/app/bootstrap/js/bootstrap.js:2067:4
at /Users/andreaswest/Documents/workspace/landing/.meteor/local/build/programs/server/boot.js:242:10
at Array.forEach (native)
at Function._.each._.forEach (/Users/andreaswest/.meteor/packages/meteor-tool/.1.1.10.13pfp1d++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
at /Users/andreaswest/Documents/workspace/landing/.meteor/local/build/programs/server/boot.js:137:5

I’ve followed this advice on SO (http://stackoverflow.com/questions/21363004/using-bootstrap-3-meteor) and put:

  • bootstrap.min.js
  • bootstrap.js
  • bskit-scripts.js
  • jquery-1.11.1.min.js
  • plugins.js

into the /client/lib folder. That unfortunately didn’t solve my problem.

I’m also loading the jquery files first, directly at the end of the <head> html tag. That also didn’t solve the problem.

Can someone help me please?


#2

if you do …

meteor add jquery
meteor add twbs:bootstrap@3.3.6

still not work??

This stackoverflow is outdated, 2014, many things happend after that …


#3

jquery is already in the list of loaded packages with version 1.2

My packages:
meteor-base # Packages every Meteor app needs to have
mobile-experience # Packages for a great mobile UX
mongo # The database Meteor supports right now
blaze-html-templates # Compile .html files into Meteor Blaze views
session # Client-side reactive dictionary for your app
jquery # Helpful client-side library
tracker # Meteor’s client-side reactive programming library

standard-minifiers # JS/CSS minifiers run for production mode
es5-shim # ECMAScript 5 compatibility for older browsers.
ecmascript # Enable ECMAScript2015+ syntax in app code

twbs:bootstrap


#4

put version number to tws:boostrap@3.3.6

remove any jquery add with html tags on or other …


#5

I’ve commented this line out:
<!-- <script type="text/javascript" src="client/lib/jquery-1.11.1.min.js"></script> -->

which has resulted in the following error:
bootstrap.min.js:7 Uncaught Error: Bootstrap requires jQuery


#6

can you put a github repo ??


#7

Here: https://github.com/a4xrbj1/jquery-error

Added other people’s recommendation like removing jquery package and renaming jquery to a_jquery


#8

Since you’ve already added the bootstrap package, you don’t need to include it anywhere else (or refer to it in your index.html). Meteor will take care of this for you. So to get this working:

  1. Add the jquery package back in: meteor add jquery
  2. Remove bootstrap everywhere you have it (all locations - so completely remove the bootstrap directory in your project root, remove it from the js directory in your project root, and remove it from your client/lib directory).
  3. Remove jquery everywhere you have it (all locations - so remove it from your client/lib directory and your js directory).
  4. Remove the references to Bootstrap and jQuery in your index.html - so completely remove:
    <script type=“text/javascript” src=“client/lib/a_jquery-1.11.1.min.js”></script>
    <script type=“text/javascript” src=“client/lib/bootstrap.min.js”></script>

You should also re-read the Structuring your application section of the Meteor docs, paying close attention to what happens to files in directories outside of Meteor’s special directories (which was a large part of the problem in your case since Meteor was attempting to load your Bootstrap JS files on both the client and server).


Bootstrap's JavaScript requires jQuery
#9

Done that. Now I get the following error message:

ReferenceError: require is not defined
at bootstrap/js/npm.js:2:1
at /Users/andreaswest/Documents/workspace/landing/.meteor/local/build/programs/server/app/bootstrap/js/npm.js:24:4
at /Users/andreaswest/Documents/workspace/landing/.meteor/local/build/programs/server/boot.js:242:10

Will try and see what happens if I delete more files, starting with npm.js

So the problem is Bootstrap installing it’s code in all those locations that Meteor is anal about it? That’s exactly why I was having a discussion on FB yesterday about why it’s so difficult for other UI’s like eg Polymer to work together with Meteor.

Guess it all has to do with who’s the prophet and who’s the mountain :wink:

Thanks for taking the time to help me


#10

Deleted npm.js got me one step further. Now it’s this error:

ReferenceError: document is not defined
at js/bskit-scripts.js:3:3

I just don’t know what all these JS scripts do but it’s still not working. Sigh


#11

Get rid of the entire bootstrap directory and it will work.


#12

Nope, still have the same error I described in my last message.


#13

And move that js directory out or your project root; if you really need the files in the js dir, move them into client/compatibility.


#14

That finally made it work. Thank you so much!!!

You saved my sanity. Honestly!


#15

No problem at all - glad it’s working!