So, I was struggling at the last few hours about getting my bootstrap navbar to work in my rails 5.1.3 app. No success. I found a console error saying
Uncaught Error: Bootstrap dropdown require Popper.js
I was aware that bootstrap was dropping tether in favour of popper.js. I added it to the Gemfile
gem 'popper_js', '~> 1.11', '>= 1.11.1'
and it did nothing. Added to the application.js like this
//= require popper
and still nothing. After a while, I bumped into Joshua Colvin's answer about popper.js in Angular. After moving the popper line up in the code, like this
//= require popper
//= require turbolinks
//= require bootstrap
And got it to work. I wanted to share this to the community because it is a pretty recent topic and was very hard to find this fix. Hope this helps a lot of coders ;)
Just add require popper before turbolinks and bootstrap like you said in the question
//= require popper
//= require turbolinks
//= require bootstrap
Related
My computer system is Mac OS. In the past few days, I was working on a rails project and I tried to use Bootstrap in my app. Followed by the instruction of Bootstrap website, I changed some files' contents but it still didn't work. Can somebody help me?
This is the code in application.scss:
#import "bootstrap-sprockets";
#import "bootstrap";
This is the code in application.js:
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
This is my Gemfile:
gem 'bootstrap-sass', '3.3.7'
I have also run 'bundle install' on my console. However, nothing happened in my pages.
Your application.js is missing the bootstrap files. Add those and you are good to go. Just add the below
//= require bootstrap-sprockets
to the application.js
This is my application.js:
//= require jquery
//= require jquery_ujs
//= require_tree .
//= stub subscriptions
It has always worked as expected and subscription.js is another file which is compiled separately.
If I add this line at the top of subscriptions.js:
//= require jquery
The subscriptions.js is compiled as expected and includes jQuery, but jQuery disappears from application.js: in the browser console I get errors like
ReferenceError: jQuery is not defined.
I cannot find a way to have jquery compiled/included in both the manifest files.
I use a development environment with Rails 4.2.4 + Puma and the default jquery-rails gem.
It's the expected behavior of the stub directive: not only subscriptions but also all its dependencies will be stubbed.
The only solution is to avoid using require_tree and stub.
I try to install react-router and material-ui on my rails 4 app but I get Sprockets::FileNotFound error for react-router and material-ui. I follow instructions from rails-assets.org.
My Gemfile:
source 'https://rails-assets.org' do
gem 'rails-assets-classnames'
gem 'rails-assets-lodash'
gem 'rails-assets-react-router'
gem 'rails-assets-material-ui'
end
application.js
//= require jquery
//= require lodash
//= require jquery_ujs
//= require react
//= require classnames
//= require react_ujs
//= require react-router
//= require turbolinks
//= require_tree .
And after bundle I got this notification on some gems This component doesn't define main assets in bower.json.. Thank you for your time and I hope we work this out.
UPD 1:
I found kind of a solution on stackoverflow but I would like to stick to rails-assets.org way if possible.
ruby '2.2.0'
rails '4.2.3'
Might be easy to forget, but have you restarted your (running) rails server?
Started to use rails-assets yesterday as well and it showed me the exact same problem (Sprockets::FileNotFound).
I restarted the running server in the console and the problem was solved.
Rails 4.2.5
/ Ruby 2.3.
For some reason my bootstrap broke after I precompiled my code. This started because I couldn't push to heroku because of a precompile error.
So here are the contents of my application.js file:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap3
//= require bootstrap
//= require bootstrap/dropdown
//= require_tree .
Maybe the order is wrong? I just added .../dropdown hoping it would help, but it did not. I just realized I can actually remove both bootstrap lines without affecting my resulting site.
For my gems, I have:
gem 'bootstrap-sass', "~>3.0.3.0"
...
gem 'bootstrap-will_paginate', '0.0.6'
Here is a link to my other question, which is similar but less focused: Ruby on Rails: Ran rake assets:precompile and now both local and heroku deployment don't include bootstrap
Any help would be greatly appreciated. I'm getting pretty frustrated, it's been several days of failed action.
Currently working on the Ruby on Rails tutorial (railstutorial.org) and in Chap 8. you make a dropdown menu using bootstrap classes for signed in users.
To make this work the book says to include
//= require jquery
//= require jquery_ujs
//= require bootstrap
in your application.js file.
This does not work locally or on heroku.
However:
//= require bootstrap
//= require jquery
//= require jquery_ujs
works locally, not on heroku. This also creates a ton of error messages in the console (Uncaught TypeError: cannot read property 'fn' of undefined)
Every stack thread and googled page I go to says that bootstrap goes first in local and jquery first in production. Meanwile I'm pulling my hair out.
git hub: https://github.com/nelsonkhan/sample_app
heroku: https://guarded-shelf-3017.herokuapp.com/
you need to have all 4 of these:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
Make sure your assets are properly compiled when you deploy on heroku. Check here for more details: https://devcenter.heroku.com/articles/rails-asset-pipeline
Changing production.rb helped for me
config.assets.compile = true