Javascript Assets Compilation Error on Heroku

Question

in my application.html.haml

=stylesheet_link_tag "application", :media => "all"
=javascript_include_tag "jquery-1.11.0.min"
=javascript_include_tag "jquery-ui-1.10.4.min"
=javascript_include_tag "angular.min"
=javascript_include_tag "angular-route.min"
=javascript_include_tag "angular-resource.min"
=javascript_include_tag "angular-ui-router.min"

these js files are currently in my app/assets/javascripts folder

when I deploy it to heroku, I keep on getting

3848+00:00 app[web.1]:     9:     =stylesheet_link_tag "application", :media => "all"
2014-05-01T21:25:16.063849+00:00 app[web.1]:     10:     =javascript_include_tag "jquery-1.11.0.min.js"
2014-05-01T21:25:16.063846+00:00 app[web.1]: ActionView::Template::Error (html5shiv.js isn't precompiled):
2014-05-01T21:25:15.995499+00:00 app[web.1]: Started GET "/" for 128.31.34.63 at 2014-05-01 21:25:15 +0000
2014-05-01T21:25:16.051098+00:00 app[web.1]:   Rendered home/index.html.haml within layouts/application (10.3ms)
2014-05-01T21:25:16.063843+00:00 app[web.1]: 
2014-05-01T21:25:16.063851+00:00 app[web.1]:     11:     =javascript_include_tag "jquery-ui-1.10.4.min.js"
2014-05-01T21:25:16.063853+00:00 app[web.1]:     12:     =javascript_include_tag "html5shiv.js"
2014-05-01T21:25:16.063854+00:00 app[web.1]:     13:     =javascript_include_tag "angular.min.js"
2014-05-01T21:25:16.063858+00:00 app[web.1]:     15:     =javascript_include_tag "angular-resource.min.js"
2014-05-01T21:25:16.063856+00:00 app[web.1]:     14:     =javascript_include_tag "angular-route.min.js"
2014-05-01T21:25:16.063860+00:00 app[web.1]:   app/views/layouts/application.html.haml:12:in `_app_views_layouts_application_html_haml___1963393475950734090_70074639367120'

I keep on getting assets compilation errors. Should I be requiring them in my application.js? in my application.js I have these

//= require jquery_ujs
//= require bootstrap
//= require_tree .

I added this to my config/environments/production.rb

config.assets.precompile += %w(email.css event_creation_dynamic_form.js jquery-1.11.0.min.js jquery-ui-1.10.4.min.js angular.min.js angular-route.min.js)

that didn't really work for me. I am not too familiar with the asset pipeline in rails and how heroku asset pipeline works. I have also tried running

heroku run rake assets:precompile

also my javascript files are all minified versions. I hope this is the correct version for production. Am I using the js include tag correctly?

Answer 1

It looks like Heroku has conveniently told you exactly what the problem is:

ActionView::Template::Error (html5shiv.js isn't precompiled)

So you need to add that file to the precompile array, like so:

config.assets.precompile += %w(html5shiv.js, any-other-files-here)

Having said that, to answer your question, no you aren't really using js include tag correctly.

You should instead include those js files in application.js. That way the files will be precompiled along with application.js, and you won't have to add them to the precompile path. For example, in application.js:

//= require path/to/jquery-1.11.0.min.js
//= require path/to/jquery-ui-1.10.4.min.js
//= require path/to/angular.min.js
//= require path/to/angular-route.min.js
//= require path/to/angular-resource.min.js
//= require path/to/angular-ui-router.min.js