Sprockets::FileNotFound in Ruby Application - ruby-on-rails

I am using Ruby -v 2.2.1 and Rails version 4.2.4 with gems haml, simple_form, and bootstrap-sass indicated below. I consistently get the following error:
Sprockets::FileNotFound in Static_page#index
The error also indicates that it could not find my file in javascript/application, more specifically this is what I have app/assets/javascripts/application.js:
//= require bootstrap-sass/assets/javascripts/bootstrap-sprockets
In addition, I have these included as well in application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
I also have the following included in my application.css.scss:
#import "bootstrap-sprockets";
#import "bootstrap";
And here are the gem files I am using:
gem 'rails', '4.2.4'
gem 'sqlite3'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'haml', '~> 4.0', '>= 4.0.7'
gem 'simple_form', '~> 3.2', '>= 3.2.1'
gem 'bootstrap-sass', '~> 3.3.6'
group :development, :test do
gem 'byebug'
end
group :development do
gem 'web-console', '~> 2.0'
gem 'spring'
end
I have already conducted a bundle install and restarted my rails sever several times to try to troubleshoot.
Why does this error keep occurring and might there be some kind of incompatibility with my gems' versions? Thank you.

The error simply states that it cannot find the JS file which has been called in application.js.
According to the docs, you need to have the following in your JS pipeline to get it working:
//= require jquery
//= require bootstrap-sprockets
Referencing bootstrap-sass/assets/javascripts/bootstrap-sprockets seems to violate that pattern (remember, asset_path acts like a PATH env var -- you can reference individual files without the relative path).

For me, this happened after upgrading to rails 7, and was because rails 7 doesn't come with Sprockets.
I fixed by adding sprockets and everything worked:
# Gemfile
gem "sprockets-rails"
More info here

Related

Bootstrap-Sprockets Error: File to import not found or unreadable: bootstrap-sprockets

I'm attempting to implement bootstrap into my app and I keep getting a couple errors that I've never received when starting apps before. I browsed for an answer and the only answers I keep finding are to remove the assets part of the Gemfile which I don't have and to restart the server which I've done several times with no luck. Below are the errors and my files. Please let me know if something else needs to be provided. Thank you!
Browser Error:
File to import not found or unreadable: bootstrap-sprockets
Rails Server Warnings:
/Users/tucker/.rvm/gems/ruby-2.2.1/gems/bootstrap-sass-3.3.6/lib/bootstrap-sass/version.rb:2: warning: already initialized constant Bootstrap::VERSION
/Users/tucker/.rvm/gems/ruby-2.2.1/gems/bootstrap-4.0.0.alpha3/lib/bootstrap/version.rb:2: warning: previous definition of VERSION was here
/Users/tucker/.rvm/gems/ruby-2.2.1/gems/bootstrap-sass-3.3.6/lib/bootstrap-sass/version.rb:3: warning: already initialized constant Bootstrap::BOOTSTRAP_SHA
/Users/tucker/.rvm/gems/ruby-2.2.1/gems/bootstrap-4.0.0.alpha3/lib/bootstrap/version.rb:3: warning: previous definition of BOOTSTRAP_SHA was here
Gemfile:
source 'https://rubygems.org'
gem 'rails', '4.2.5'
group :production do
gem 'pg'
gem 'rails_12factor'
end
group :development do
gem 'sqlite3'
end
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'bootstrap'
gem 'figaro'
gem 'pry'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'bootstrap-sass'
group :development, :test do
gem 'byebug'
gem 'web-console', '~> 2.0'
gem 'spring'
gem 'rspec-rails'
gem 'shoulda'
gem 'faker'
gem 'factory_girl_rails'
end
Application.js:
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Application.scss:
...
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
I see you have gem 'bootstrap' and gem 'bootstrap-sass' in your gemfile. If you delete one of them, run bundle and follow the installation instructions on the respective github site then the sprockets should work. Also mine application.scss file is usually without the require part.
1º) Install the following gems in your Gemfile:
gem 'bootstrap-sass', '~> 3.3.6'
gem 'autoprefixer-rails'
2º) Issue the following command:
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.sass
3º) Edit pp/assets/stylesheets/application.css.sass and append the following lines:
#import "bootstrap-sprockets"
#import "bootstrap"
4º) Edit your app/assets/javascripts/application.js file and be sure it has the following lines:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
5º) Now run
bundle install
And you are ready! This recipe always works for me and it is in this site.
Hope it helps!
Problem : file to import not found or unreadable bootstrap-sprockets
#import "bootstrap-sprockets";
#import "bootstrap";
...........
solution :
gem 'rails', '5.0.0.1'
gem 'bootstrap-sass', '3.3.6'
do bundle install
then restart your rails server

Bootstrap Rails SCSS Not Responsive

I am just getting into Rails and have already hit a big roadblock. I am starting with a simple view and navigating to / renders everything fine, on the desktop view.
I have Bootstrap and Bootswatch running and everything seems to be fine until I open the mobile viewport in the Chrome dev tools. The site isn't responsive at all, but the styles are all there.
In Chrome dev tools, the media query is coming back as media="all" in any viewport I choose. Strangely enough, when I navigate to /# and then /, on the mobile view, the desktop view just gets squished in and doesn't conform.
My Gemfile:
source 'http://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails'
# Use Bootswatch and Bootstrap for styling
gem 'bootswatch-rails'
gem 'bootstrap-sass'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', group: :doc
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
My application.css.scss: (Also is it supposed to be .sass or .scss, I tried both)
#import "bootstrap-sprockets";
#import "bootswatch/readable/variables";
#import "bootstrap";
#import "bootswatch/readable/bootswatch";
My application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
Any help would be appreciated, I have spent a solid 2 hours trying to get this to work!
Add this into head:
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Undefined mixin 'formFieldState'. Rails Bootstrap 3 using Bootstrap-sass

I downloaded the SpaceLab theme from sass-bootswatch.theblacksmithhq.com and in part of the file it has
// FORMS
// -----------------------------------------------------
.control-group.warning {
#include formFieldState(#E29235, #E29235, $warningBackground);
}
.control-group.error {
#include formFieldState(#C00, #C00, $errorBackground);
}
.control-group.success {
#include formFieldState(#2BA949, #2BA949, $successBackground);
}
// DROPDOWNS
// -----------------------------------------------------
When I run rake assets:precompile or just put up a rails server I get this error Undefined mixin 'formFieldState'.
This began after I added active admin. My application.css file looks like this by the way.
*= require_self
*= require variables
*= require base
*= require devise
*= require nav
*/
I can remove the section from the variables file and it will run but my styles look really bad almost like bootstrap is not running.
My Gemfile looks like this:
gem 'rails', '3.2.13'
gem 'devise'
gem 'omniauth-google-oauth2'
gem 'decent_exposure'
gem 'turbolinks'
gem 'simple_form'
gem 'activeadmin'
gem "meta_search", '>= 1.1.0.pre'
gem 'jquery-rails'
#TODO needed for the server
gem 'mysql'
group :production do
# needed for heroku
#gem 'pg'
end
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'sass-rails'
gem 'bootstrap-sass'
#TODO needed for the server
#gem 'execjs'
#gem 'therubyracer'
end
group :development, :test do
gem 'certified'
gem 'better_errors'
gem 'factory_girl_rails'
gem 'pry-rails'
gem 'pry-stack_explorer'
gem 'pry-debugger'
gem 'awesome_print'
gem 'quiet_assets'
gem 'rspec-rails'
gem 'heroku'
end
group :test do
gem 'sqlite3'
end
If there is anything else that would help you understand please let me know.
I have two explanations - I think both of them apply to you:
You have not specified a version for the 'bootstrap-sass' gem in your Gemfile. Your SpaceLab theme seems to be based on Bootstrap 2 while the current version of the 'bootstrap-sass' gem is 3.0.2.1, which ships Bootstrap 3.0.2, which is not compatible with SpaceLab (and the mixin doesn't exist anymore). Maybe you "accidentally" upgraded bootstrap-sass when installing Active Admin.
Another problem is accessing SASS variables and mixins when using the Asset Pipeline (Sprockets), as described here. If you use //=require for importing stylesheets (e.g. for importing Bootstrap and your theme from separate files in your application.css) you cannot access SASS variables and mixins between files because Sprockets compiles each file separately. The only option you have is to import Bootstrap and your theme via the Sass #import one after another in one SASS file to make sure they're able to access each others' variables and mixins, like (just exemplarily):
#import "spacelab-variables";
#import "bootstrap";
#import "spacelab-theme";

How to get jquery animate to work on Rails 4.0.0?

Rails: 4.0.0
Ruby : 1.9.3
I am using jQuery's animate() method in my Rails application.
I can't get it to work.
I've read the documentation at jquery-ui-rails and followed the steps mentioned there, i.e.,
Installed the gem
included it in the Gemfile - gem 'jquery-ui-rails'
bundle install
Added the //= require jquery.ui.all in my application.js file
Yet I get an Sprockets::FileNotFound error.
Showing /Users/anil20787/workspace/railsdir/depot/app/views/layouts/application.html.erb where line #9 raised:
couldn't find file 'jquery.ui.all'
(in /Users/anil20787/workspace/railsdir/depot/app/assets/javascripts/application.js:14)
Gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-ui-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 1.2'
group :doc do
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', require: false
end
I did also look up this post with a problem similar to mine, but it is pointing to the documentation, whose steps I have already followed. Not sure where I have made a mistake.
Any help is appreciated. Thanks
According to this the order of the includes is important. Can you post your include file?
Put //= require jquery.ui.all right after //= require jquery so it will look like this
//= require jquery
//= require jquery.ui.all
//= require jquery_ujs
//= require underscore
//= require backbone
//= require svitla_test
//= require_tree .
Restarting my Rails server did it for me.
If anyone still struggle with this I added gem 'rails-asset-jqueryui' then run bundle install and after it, restart server... then the file should be found, of course you also need to add
//= require jquery.ui.all in application.js file
and
*= require jquery.ui.all in applications.css file

Rails jquery-fileupload gem - couldn't find file error

I'm trying to follow the Railscasts episode on jQuery-FileUpload. I've added
gem 'jquery-fileupload-rails'
to the assets group of the Gemfile, and also added the
//= require jquery-fileupload/basic
line to the application.js file in the asset directory. When I try to bring up the website, however, the following error is shown:
couldn't find file 'jquery-fileupload'
(in root/app/assets/javascripts/application.js:15)
Any help would be greatly appreciated.
I found a "solution" - restarting rails server did the trick.
Remove it from assets group, and it'll work fine.
I have fix this by :
add
gem 'therubyracer'
gem 'execjs'
to your Gemfile.
and run bundle install
and
rake assets:precompile --trace RAILS_ENV=production
That's really weird, I just tried with a Gemfile:
source 'https://rubygems.org'
gem 'rails', '3.2.12'
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
gem 'sqlite3'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem "jquery-fileupload-rails"
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'uglifier', '>= 1.0.3'
end
gem 'jquery-rails'
and on application.js
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery-fileupload/basic
and worked great, did you run bundle ? I know its a stupid question but it may be
I think you wanna add the following line to application.js
//= require jquery-fileupload
I ran into something similar lately. What worked for me was to load the gem directly from git
gem 'jquery-fileupload-rails', git: 'git://github.com/ollnixon/jquery-fileupload-rails.git'
And then to load the the needed ui styles
*= require jquery.fileupload-ui
Works flawlessly now

Resources