Javascript Not Loading On Heroku

I am trying to deploy an application. My javascript is loading perfectly on development but it's not loading on the production. Even I am not getting any error in production. If so

Solution 1:

You need to remove require_tree and load your js in this fashion.

//= require jquery
//= require jquery.flexslider-min
//= require jquery_ujs

Solution 2:

For Rails 6+ (or those using Webpacker)

If you've just deployed a newly minted rails app to Heroku, i.e. a Hobby tier or something like that, then you will need to ensure that you've added to the Node build pack:

(1) Ensure your heroku remote is set up:

• The following assumes heroku is the name of the git remote. You can check whether you have it set up by typing in:

git remote -v

...and you should see heroku listed there. If you can't see it, then you need to set up a git remote pointing to heroku.

(2) Add the NodeJS Buildpack

• This will clear the buildpacks - don't do it if you don't want to elminate your other build packs:

heroku buildpacks:clear

• Add the nodejs buildpack first (note: the order is important here: ruby must go AFTER nodejs)

heroku buildpacks:set heroku/nodejs heroku buildpacks:add heroku/ruby

(3) Lastly, check that you are properly serving your assets:

In my case I am using the style_sheet_pack_tag

# application.html.erb
<%= stylesheet_pack_tag "application", media: 'all', 'data-turbolinks-track': 'reload' %>

Hope this helps someone!

Solution 3:

View on the console what is the error

If you use any jquery library then implement Gemfile with jquery-rails like below

# Use jquery as the JavaScript library
gem 'jquery-rails'

Then install bundle

Then update application.js

//= require jquery

If your app using turbolinks then modify your code like below

$(document).on('turbolinks:load', function(){
  $('.flexslider').flexslider({
    animation: "fade",
    slideshowSpeed: 4000,
    animationSpeed: 600,
    controlNav: false,
    directionNav: true,
    controlsContainer: ".flex-container"// the container that holds the flexslider
  });
});

Hope to help

Solution 4:

rails-ujs, introduced in Rails 5, is not for using jQuery - it was developed to get rid of jQuery dependency.

So, if you still need jQuery, you need to have the following settings:

Gemfile: gem 'jquery-rails'

application.js: //= require jquery //= require jquery_ujs

and remove the //= require rails-ujs if already present in application.js.