bower or grunt keeps removing jquery from index.html

There's a long answer here, but I only have time for a short one, and I figured I might as well give that instead of nothing!

bower-install is a task that depends on Bower packages properly specifying a main property inside of their bower.json. Some recent stuff has gone on with the jQuery Bower package, and it no longer specifies this property. Without, grunt-bower-install can't help much.

The solution is to manually include that reference to jQuery outside of the <!-- bower:js --><!-- endbower --> block in your HTML.

Sorry for the frustration. Hopefully, jQuery will fix its bower.json soon.


There's an even better solution here that doesn't force you to move the script tag away from the other bower components. You can use an overrides section (found on https://github.com/ajaxorg/ace-builds/issues/20)

Add the following section to your project's bower.json

...
"overrides": {
    "jquery": {
        "main": "dist/jquery.js"
    }
}

I saw the same problem a few minutes ago with grunt + yeoman + bower. In my case, the "overrides" solution did not work.

grunt wiredep

kept reordering the entries in app/index.html. The problem turned out to be the location of jquery in the dependencies section of bower.json. In my case, jquery was the 9th entry in the dependencies section in bower.json.

grunt wiredep 

would then move

<script src="bower_components/jquery/dist/jquery.js"></script>

to location #9 in app/index.html even if I manually made it #1 entry or used overrides.

In my case, jquery needs to be ahead of angular and this reordering was killing my app at runtime.

My dependencies section in bower.json looked like this before:

"dependencies": {
    "angular": "1.4.8",
    "angular-animate": "^1.3.0",
    "angular-aria": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-messages": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "jquery": "^2.2.3",
},

Now, it looks like this (notice how jquery has relocated to position #1).

"dependencies": {
    "jquery": "^2.2.3",
    "angular": "1.4.8",
    "angular-animate": "^1.3.0",
    "angular-aria": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-messages": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
}

I am putting this here so that others could use this solution, if nothing else works.