javascript_include_tag :application loads javascripts twice in development environment

Question

This is weird...

This line of code in the head section of my layout:

<%= javascript_include_tag :application %>

Results in this html:

<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.prettyPhoto.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.qtip.min.js?body=1" type="text/javascript"></script>
<script src="/assets/dataTables/jquery.dataTables.js?body=1" type="text/javascript"></script>
<script src="/assets/datatable-enables.js?body=1" type="text/javascript"></script>
<script src="/assets/modernizr-1.7.min.js?body=1" type="text/javascript"></script>
<script src="/assets/qtips.js?body=1" type="text/javascript"></script>
<script src="/assets/pagination.js?body=1" type="text/javascript"></script>
<script src="/assets/payments.js?body=1" type="text/javascript"></script>
<script src="/assets/replies.js?body=1" type="text/javascript"></script>
<script src="/assets/searches.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/user.js?body=1" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.base.js?body=1" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.bing.js?body=1" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.googlemaps.js?body=1" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.mapquest.js?body=1" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.openlayers.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.rateit.min.js?body=1" type="text/javascript"></script>
<script src="/assets/feedbacks.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

As you can see it generates a call for each javascript resource and a call to the compiled applications.js, which of course includes, again, every javascript resource.

As a result of this, every javascript is called twice!

This happens only in the development environment, while in the production environment the generated html is, accurately, just:

<script src="/assets/application.js?body=1" type="text/javascript"></script>

And this is 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, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, 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
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.prettyPhoto
//= require jquery.qtip.min
//= require dataTables/jquery.dataTables
//= require datatable-enables
//= require modernizr-1.7.min
//= require qtips
//= require pagination
//= require payments  
//= require replies
//= require searches
//= require static_pages
//= require user
//= require gmaps4rails/gmaps4rails.base 
//= require gmaps4rails/gmaps4rails.bing 
//= require gmaps4rails/gmaps4rails.googlemaps
//= require gmaps4rails/gmaps4rails.mapquest
//= require gmaps4rails/gmaps4rails.openlayers
//= require jquery.rateit.min
//= require feedbacks

I'm riding Rails 3.2.13, what's going on here?

Answer 1

I had the same kind of problem before with my Rails application. Including the line

config.serve_static_assets = false

in the development.rb file solved this issue. (This configuration item defaults to true in development according to rubyonrails.org, and to false in production, which is why you were not having this problem in production.)

This setting decides whether Rails should serve the static asserts in the public/ directory. In production, a webserver will handle this task, thus the setting defaults to false.

You may want to take a look at these posts:

• Rails 3.1 remote requests submitting twice

As @gertas said in this post :

Adding config.serve_static_assets = false to development.rb will prevent loading files from /public/assets.

• Ruby On Rails 3.1 - assets pipeline - assets rendered twice

And finally, you could also use the configuration guide for Rails at http://guides.rubyonrails.org/configuring.html

It provides a comprehensive explanation about configuration items in a Rails app.

Answer 2

Delete Asset Pipeline folder from public folder. It automatically loads the js file from that area by default.

Answer 3

The application.js is not loading twice but the case is -

In development environment assets are not precompiled by default. So your application.js loads at end of all javascripts. Actually application.js file includes all the required js files needed to run the application and if any of them is not loaded before this , it will show you error.

for example My application.js file has this content

//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .

Then it means all these js files must be loaded first and then application.js will be loaded.

But in production environment what happens is all the js files are precompiled in single application.js file and you see only one file there.

So, I would suggest not to worry about this. This is normal behaviour of rails 3 application in dev environment.

Answer 4

Run

bundle exec rake assets:clean

This cleans all precompiled assets, since you don't need them in development environment (they are serveds through assets pipeline).

Answer 5

It is not including twice as application.js. Whatever you include in application.js will be referenced in development environment and any JS code that's been written in application.js will be added in last application.js call. Try clicking on application.js reference you will notice this.

In Production environment however; it will only reference application.js that will contain all other referenced file's code as minified.