Javascript features work on localhost but not when deployed to Heroku

Question

I've noticed that when I deploy to Heroku, javascript features dont work (such as Bootstrap Popover, Buttons, etc). I'm working with rails 3.2.2, ruby 1.9.3. The features work on localhost. There appear to be no errors displayed when deployed to Heroku (the features simply don't show up).

Any ideas? Thanks!

If you put some console.log lines in, do you get anything out? — jimw, Apr 18 '12 at 18:14
I don't know anything about Heroku (first time I've ever heard the name before), but JavaScript is executed on the client-side. So as long as you are using the same browser and the JavaScript code is the same, you should get the same behavior. Try viewing the source code (from the right-click menu or Edit menu in your browser) for both scenarios and compare for differences. — Travesty3, Apr 18 '12 at 18:17
Are the Javascript files being pulled correctly (what does Firebug say)? If so, do you have any code specific to localhost domain? — Igor, Apr 18 '12 at 18:17
jimw: I tested console.log and I get an output in localhost, but nothing when its deployed to heroku. — Alex De Simone, Apr 18 '12 at 19:42
Using Chrome, and the error I see in the inspector says: "Uncaught TypeError: Object [object Object] has no method 'popover' — Alex De Simone, Apr 18 '12 at 19:44
Could you perhaps link us to an instance of the problem? We may be able to have a look at it for you. — Jarrod Mosen, Apr 19 '12 at 04:49
I'd suggest trying to run your application in production mode locally - this will highlight the problem. It won't be a heroku issue - at a guess it's asset pipeline related. — John Beynon, Apr 19 '12 at 07:08

score 15 · Answer 1 · answered Jan 05 '13 at 20:54

15

Manually precompiling worked for me.

bundle exec rake assets:precompile before you push to heroku.

answered Jan 05 '13 at 20:54

Dru

9,632
13
49
68

This seems to be the way to go if you manually include bootstrap.js and bootstrap.css instead of using the gem – eziegl May 28 '14 at 01:15
heroku does that for ya – Kick Buttowski Aug 30 '17 at 01:42

score 6 · Answer 2 · edited May 23 '17 at 12:33

6

I had the exact same issue (I'm very new to Rails). I eventually solved the issue by rearranging the order of files within application.js:

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap

For the javascripts to work in development, "require jquery" needed to be after "require twitter/bootstrap." In production, jquery needed to come first. Not sure what caused this, but it now works when deployed to Heroku.

I used these two posts:

javascript - Twitter bootstrap jquery plugins not compiled for production

twitter bootstrap drop down suddenly not working

edited May 23 '17 at 12:33

Community

1
1

answered Jun 27 '12 at 19:25

TaylorT

208
3
9

Rails 4.2.5 update: //= require jquery //= require jquery_ujs //= require bootstrap //= require angular //= require 'leaflet.js' //= require leaflet //= require_tree . Dropdowns work on Heroku, but bootstrap needs to be second on localhost. Is there a way to fix this or at least have it work on both Heroku and localhost without changing application.js? PS. Can't seem to format comments. – Greg Mar 30 '16 at 20:14

score 5 · Answer 3 · answered Aug 03 '13 at 05:07

5

Check your production.rb file. I believe the line needs to be:

config.assets.compile = true

I believe this gets set to false by default.

answered Aug 03 '13 at 05:07

pipebender

53
2
5

Warning: Richard Hulse advises not to turn this on here: http://stackoverflow.com/questions/8821864/config-assets-compile-true-in-rails-production-why-not – Alex Jul 02 '16 at 18:08

score 2 · Answer 4 · answered Sep 16 '14 at 18:32

2

Remember that everything that you would normally do on localhost, you must be doing with heroku. Make sure you heroku run rake assets:precompile.

answered Sep 16 '14 at 18:32

Stephen Burke

389
2
13

score 1 · Accepted Answer · answered Apr 30 '12 at 21:22

1

I also had similar problem but the problem was happening on localhost as well.

You are probably using rails-bootstrap gem. It installs a file bootstrap.coffee.js This file was culprit. It had .popover use and relevant plugin was not included. I commented that out as I was not using it anyway but you should consider including the popover plugin for bootstrap.

answered Apr 30 '12 at 21:22

amitamb

1,067
11
22

I followed what you said and as soon as I deleted my coffee file , all is working, yet I wanna know **do you have any source to back your claim?** – Kick Buttowski Aug 30 '17 at 01:41

score 1 · Answer 6 · answered May 09 '15 at 02:39

Checked the minified js for my app, and popover was twice in the file.

Be sure that only one of bootstrap and boostrap-sprockets is declared in your javascript assets

From the docs:

bootstrap-sprockets and bootstrap should not both be included in application.js.

bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js or dropdown.js, for example), while bootstrap provides a concatenated file containing all Bootstrap Javascripts.

Be sure that only one of bootstrap and bootstrap sprockets

Refs: bootstrap-sass github issue and here.

score 0 · Answer 7 · answered Aug 24 '18 at 04:47

0

Updating sprockets worked for me: bundle update sprockets

answered Aug 24 '18 at 04:47

vladiim

1,862
2
20
27

score -1 · Answer 8 · answered Sep 15 '17 at 22:21

-1

If you've already tried heroku run rake assets:precompile and the JS still isn't working, try doing heroku restart to restart the server after precompiling assets.

answered Sep 15 '17 at 22:21

Anthony To

2,193
2
21
29

Javascript features work on localhost but not when deployed to Heroku

8 Answers8

Linked