How do I specify jQuery version using Rails defaults and bower?

Question

My rails4 app uses Bower to manage front end dependencies. The only js not managed by Bower was jQuery as it was included by Rails by default through the jquery-rails gem.

"Suddenly" my dev environment stopped working because after some updates, for some reason, bower locked jquery version to 3.0.0 as stated from bower.json file:

masciugo@masciugcbookpro ~/dev/v/hr_dashboard $ r bower:list I, [2016-06-23T12:58:33.549334 #5308] INFO -- : Celluloid 0.17.3 is running in BACKPORTED mode. [ http://git.io/vJf3J ] /Users/masciugo/.nvm/v0.12.4/bin/bower list bower invalid-meta The "name" is recommended to be lowercase, can contain digits, dots, dashes bower check-new Checking for new versions of the project dependencies... bower-rails generated vendor assets /Users/masciugo/dev/v/hr_dashboard/vendor/assets ├─┬ bootstrap#3.3.4 (latest is 4.0.0-alpha.2) │ └── jquery#3.0.0 ├── bootstrap-horizon#0.1.0 ├─┬ bootstrap-validator#0.9.0 (latest is 0.10.2) │ └── jquery#3.0.0 ├── classnames#2.2.3 (latest is 2.2.5) ├─┬ eonasdan-bootstrap-datetimepicker#4.17.37 │ ├── jquery#3.0.0 │ ├── moment#2.13.0 │ └─┬ moment-timezone#0.5.4 │ └── moment#2.13.0 ├── es6-shim#0.34.4 (latest is 0.35.1) ├── humps#1.0.0 (latest is 1.1.0) ├─┬ jquery-ui#1.10.4 (latest is 1.11.4) │ └── jquery#3.0.0 ├── moment#2.13.0 ├── pubsub-js#1.5.3 ├─┬ react-bootstrap#0.26.4 (latest is 0.29.5) │ └── react#0.13.3 (latest is 15.1.0) ├── react-geosuggest#1.9.1 (latest is 1.24.1) ├── spin.js#2.3.2 └── underscore#1.8.3

Looking at individual libs bower.json files, none of them set the upper bound for jquery so the last one was downloaded and used. Actually eonasdan-bootstrap-datetimepicker doesn't not work with jquery3 as it uses .size() method. So I wondered I could force the usage of a lower jQuery version. I ended up removing jquery-rails from gemfile and manually adding jquery (and jquery-ujs) with bower specifying versions:

{ "lib": { "name": "bower-rails generated lib assets", "dependencies": { // "threex" : "git@github.com:rharriso/threex.git", // "gsvpano.js" : "https://github.com/rharriso/GSVPano.js/blob/master/src/GSVPano.js" } }, "vendor": { "name": "bower-rails generated vendor assets", "dependencies": { "jquery": "<2", "jquery-ujs": "<2", "bootstrap": "3.3.4", "eonasdan-bootstrap-datetimepicker": "4.17.37", "bootstrap-validator": "0.9.0", "moment": "2.13.0", "underscore": "1.8.3", "react-geosuggest": "1.9.1", "pubsub-js": "1.5.3", "spin.js": "2.3.2", "jquery-ui": "1.10.4", "es6-shim": "0.34.4", "classnames": "2.2.3", "react-bootstrap": "0.26.4", "humps": "1.0.0", "bootstrap-horizon": "0.1.0" } } }

obtaining:

masciugo@masciugcbookpro ~/dev/v/hr_dashboard $ r bower:list I, [2016-06-27T12:09:29.493630 #21386] INFO -- : Celluloid 0.17.3 is running in BACKPORTED mode. [ http://git.io/vJf3J ] /Users/masciugo/.nvm/v0.12.4/bin/bower list bower invalid-meta The "name" is recommended to be lowercase, can contain digits, dots, dashes bower check-new Checking for new versions of the project dependencies... bower-rails generated vendor assets /Users/masciugo/dev/v/hr_dashboard/vendor/assets ├─┬ bootstrap#3.3.4 (latest is 4.0.0-alpha.2) │ └── jquery#1.12.4 (3.0.0 available) ├── bootstrap-horizon#0.1.0 ├─┬ bootstrap-validator#0.9.0 (latest is 0.10.2) │ └── jquery#1.12.4 (3.0.0 available) ├── classnames#2.2.3 (latest is 2.2.5) ├─┬ eonasdan-bootstrap-datetimepicker#4.17.37 │ ├── jquery#1.12.4 (3.0.0 available) │ ├── moment#2.13.0 │ └─┬ moment-timezone#0.5.4 │ └── moment#2.13.0 ├── es6-shim#0.34.4 (latest is 0.35.1) ├── humps#1.0.0 (latest is 1.1.0) ├── jquery#1.12.4 (latest is 3.0.0) ├─┬ jquery-ui#1.10.4 (latest is 1.11.4) │ └── jquery#1.12.4 (3.0.0 available) ├─┬ jquery-ujs#1.2.1 │ └── jquery#1.12.4 (3.0.0 available) ├── moment#2.13.0 ├── pubsub-js#1.5.3 ├─┬ react-bootstrap#0.26.4 (latest is 0.29.5) │ └── react#0.13.3 (latest is 15.1.0) ├── react-geosuggest#1.9.1 (latest is 1.24.1) ├── spin.js#2.3.2 └── underscore#1.8.3

Is this an acceptable solution? Ideally I would specify the versions in manifest js file but I've never seen that. How should I deal with such situation?

Answer 1

jquery-rails is specific to rails assets and "invisible" to bower, so you have to specify the version you need within bower/bower-rails configuration, to avoid conflict with other assets specified by bower.

You can keep jquery-rails as it will not interfere with bower , unless you choose to load it in your view or layout files (you can reference both assets directly managed by rails AND those managed by bower, but this may lead to conflicts).