bower or grunt keeps removing jquery from index.html

Question

This is driving me crazy. So far Bower+Grunt (via Yeoman) has been a major source of frustration and a waste of time. All I want is my app to use the latest (2.1.0) version of jquery.

bower list correctly reported jquery 2.1.0 as an official update.

I ran bower install --save jquery to update to the last version, which it did.

The bower list command now correctly reports jquery#2.1.0 as a dependency, and the bower.json file now correctly lists jquery with the wanted version as a dependency:

{
  "name": "xxx",
  "version": "0.0.0",
  "dependencies": {
    ...
    "angular": "1.2.13",
    "jquery": "~2.1.0",
    "sizzle": "1.10.16",
    "bootstrap": "~3.0.3",
    ...

But every time I run grunt build or grunt serve the <script src="bower_components/jquery/dist/jquery.js"></script> list gets removed from index.html, preventing the entire app from functioning.

#> grunt serve
Running "serve" task

Running "clean:server" (clean) task
Cleaning .tmp...OK

Running "bower-install:app" (bower-install) task

jquery was not injected in your file.
Please go take a look in "app/bower_components/jquery" for the file you need, then manually include it in your file.

Running "concurrent:server" (concurrent) task
...

Adding it manually doesn't solve anything. I'm completely stuck. There must be something I am doing wrong but I've been banging my head for a long time while being completely unproductive. Thank you.

Answer 1

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.

Answer 2

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"
    }
}

Answer 3

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.

Answer 4

The simple and proper solution is to add this reference under overrides section in bower.json: like here I added for jquery-ui.

"overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js"
      ]
    },
    "jquery-ui": {
      "main": [
        "themes/base/jquery-ui.css",
        "ui/jquery-ui.js"
      ]
    }
  }

Cheers :)