Menu
I have a bower.json with these dependencies:
"dependencies": {
"bootstrap": "~3.0.2",
"jquery": "~2.0.3",
"modernizr": "~2.7.0"
}
The production files are then built using grunt.
Bower and Grunt were configured using yeoman and the generator-webapp (after which I included bootstrap3 and updated jquery and modernizr).
The page shows this error: "Uncaught Error: Bootstrap requires jQuery"
What could be wrong?
Is there a way to make sure that jquery is loaded before bootstrap? I've tried changing the sequence of the dependencies in bower.json but it didn't help.
Could it be that jquery was not included during the build process? How would I know? (I'm a yeoman, bower and grunt noob)
This is my index.html:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="CH"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="CH"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="CH"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="CH"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>gabriel</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.tmp) styles/main.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="hero-unit">
<h1>'Allo, 'Allo!</h1>
<p>You now have</p>
<ul>
<li>HTML5 Boilerplate</li>
<li>Modernizr</li>
</ul>
</div>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body>
</html>
222
There are 2 steps in obtaining libraries with bower:
Downloading them
First off check whether jQuery is present in bower_components.
Whenever manually editing bower.json, you have to also run bower update to download libraries to bower_components.
Running bower update isn't necessary if you introduced a new dependency with bower install.
Injecting them in your app code (index.html)
Here's how to do it with grunt-bower-install. Another possibility is using RequireJS.
Should bower have any problems on this step, just feel free to add that one necessary <script ... </script> to your index.html manually. Often when I add a new dependency, in subsequent invocations of grunt bower-install first invocation deletes all previous dependencies from index.html and leaves only the new one and the invocation following it injects all the dependencies except for the new one.
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
