Rails assets loading twice in development; creates strange behavior

Question

I'm working on a rails app and am seeing strange behavior that I believe is caused by rails assets loading multiple times in development.

I'm working in Chrome, and had the Developer Tools -> Network -> "disable cache" checkbox marked, which made js and css assets load only once and made everything work as expected/desired.

When I unchecked the "disable cache" box, however, assets started to load multiple times, and typeahead breaks, throwing: Uncaught TypeError: $(...).typeahead is not a function .

Steps to reproduce:

git clone https://github.com/duhaime/chalkboard.git
cd chalkboard
rake sunspot:solr:start
rake db:drop db:create db:migrate db:seed
rake sunspot:solr:reindex
rails s
# visit localhost:3000 and enable/disable cache (then refresh) in Chrome

I believe it's possible to resolve this error by disabling caching from within Rails (as opposed to the browser client), but I wanted to ask if there is a proper way to resolve this situation without disabling caching. I've read through many of the other SO threads on this question, but haven't found a workable solution. I would be very grateful for any advice others can provide on this question!

Answer 1

The reason typeahead was failing was because I was importing it via app/assets/javascripts/application.js file:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require twitter/typeahead
//= require_tree .

and I was using <%= javascript_include_tag 'typeahead' %> . To make matters worse, the typeahead include calls was importing typeahead.bundle.js version 0.11.1, and I had gem installed twitter-bootstrap-rails version 0.10.5.

I removed all of the <%= javascript_include_tag '{package}' %> , removed the typeahead.bundle.js file from my /assets directory, and the $(...).typeahead is not a function error has gone away. I'll leave this question here in case it will help others.