Rails 5- jQuery works in local production(rails s -e production) but not on Heroku
I can run jQuery on local production doing rails s -e production but when the same project is deployed to Heroku, jQuery doesn't work and I get an error in the console that says
"Uncaught ReferenceError: $ is not defined"
. I am not using Turbolinks so I don't think I need to do anything besides
$(document).ready(function() {
//everything js goes here });
Normal JavaScript works though.
I checked in the console on Chrome with $("#element-id") and it gave details of the element, so I think jQuery is being loaded. Or is it that Chrome console has jQuery by default?
My application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require Chart.min
//= require_tree .
Shouldn't the local production environment be the same as the Heroku? Why is the behavior different on Heroku and local production environment?
Hey Bigyan,
Check out this article on Heroku with the Rails asset pipeline: https://devcenter.heroku.com/articles/rails-4-asset-pipeline
The assets are designed to compile on the fly in development, but for production they get compiled and minified during deploy. Heroku also needs your Rails app to serve static assets, which is not the default for production. Normally, NGINX would do this but Heroku works a bit differently.