Javascript features work on localhost but not when deployed to Heroku

T

8

20

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!

Tier answered 18/4, 2012 at 18:13 Comment(7)

If you put some console.log lines in, do you get anything out? – Emmalineemmalyn 18/4, 2012 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. – Ferrel 18/4, 2012 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? – Plume 18/4, 2012 at 18:17

jimw: I tested console.log and I get an output in localhost, but nothing when its deployed to heroku. – Tier 18/4, 2012 at 19:42

Using Chrome, and the error I see in the inspector says: "Uncaught TypeError: Object [object Object] has no method 'popover' – Tier 18/4, 2012 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. – Forfeiture 19/4, 2012 at 4: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. – Flip 19/4, 2012 at 7:8

D

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.

Dato answered 30/4, 2012 at 21:22 Comment(1)

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? – Mcgregor 30/8, 2017 at 1:41

S

15

Manually precompiling worked for me.

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

Smear answered 5/1, 2013 at 20:54 Comment(2)

This seems to be the way to go if you manually include bootstrap.js and bootstrap.css instead of using the gem – Lathi 28/5, 2014 at 1:15

heroku does that for ya – Mcgregor 30/8, 2017 at 1:42

C

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

Cordilleras answered 27/6, 2012 at 19:25 Comment(1)

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. – Overfeed 30/3, 2016 at 20:14

G

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.

Giana answered 3/8, 2013 at 5:7 Comment(1)

Warning: Richard Hulse advises not to turn this on here: #8822364 – Shanly 2/7, 2016 at 18:8

T

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.

Twum answered 16/9, 2014 at 18:32 Comment(0)

D

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.

Dato answered 30/4, 2012 at 21:22 Comment(1)

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? – Mcgregor 30/8, 2017 at 1:41

S

1

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.

Selah answered 9/5, 2015 at 2:39 Comment(0)

S

0

Updating sprockets worked for me: bundle update sprockets

Shumaker answered 24/8, 2018 at 4:47 Comment(0)

M

-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.

Molasses answered 15/9, 2017 at 22:21 Comment(0)

Recommended topics

Hot tags