Bootstrap 5 Javascript Functions not Working in Rails 7 app

I’m trying to set up my first Rails 7 app and have installed Bootstrap 5 properly (you can see by the CSS) and gotten rid of all the error messages, but the javascript functions (i.e. dropdown menus, offcanvas, etc.) aren’t working.

I have tested it with this code:

<script>
  $( document ).ready(function() {
    console.log( "document ready!" );
    $( "#TEST" ).click(function() {
      console.log( "clicked!" );
    });
  });
</script>

JavaScript
​x
 
<script>
  $( document ).ready(function() {
    console.log( "document ready!" );
    $( "#TEST" ).click(function() {
      console.log( "clicked!" );
    });
  });
</script>
​

And both console.log statments produce the correct result, leading me to believe js and jquery are working properly and it is something with bootstrap.

Here’s my gemfile:

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '3.1.0'

# RAILS GENERATED STUFF
gem 'rails', '~> 7.0.1'
gem 'pg', '~> 1.1'
gem 'puma', '~> 5.0'
gem 'sass-rails', '>= 6'
# gem 'webpacker', '~> 5.0'
gem 'jsbundling-rails'
gem 'jbuilder', '~> 2.7'
gem 'bootsnap', '>= 1.4.4', require: false
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

# OTHER NECESSARY STUFF
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'sprockets-rails'
gem 'bcrypt', '~> 3.1.7'
gem 'gon'

# ESSENTIALS
gem 'devise'
gem 'simple_form'
gem 'font_awesome5_rails'
gem 'friendly_id', '~> 5.2.0'
gem 'tinymce-rails'
gem 'invisible_captcha'
gem 'figaro'
gem 'high_voltage', '~> 3.1'
gem 'bootstrap', '~> 5.1', '>= 5.1.3'

# FOR IMAGES
gem 'mini_magick'
gem 'aws-sdk' , '~> 3'
gem 'aws-sdk-s3', require: false

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'pry-rails'
  gem 'better_errors'
end

group :development do
  gem 'web-console', '>= 4.1.0'
  gem 'rack-mini-profiler', '~> 2.0'
  gem 'listen', '~> 3.3'
  gem 'spring'
end

group :test do
  gem 'capybara', '>= 3.26'
  gem 'selenium-webdriver'
  gem 'webdrivers'
end

JavaScript
 
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
​
ruby '3.1.0'
​
# RAILS GENERATED STUFF
gem 'rails', '~> 7.0.1'
gem 'pg', '~> 1.1'
gem 'puma', '~> 5.0'
gem 'sass-rails', '>= 6'
# gem 'webpacker', '~> 5.0'
gem 'jsbundling-rails'
gem 'jbuilder', '~> 2.7'
gem 'bootsnap', '>= 1.4.4', require: false
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
​
# OTHER NECESSARY STUFF
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'sprockets-rails'
gem 'bcrypt', '~> 3.1.7'
gem 'gon'
​
# ESSENTIALS
gem 'devise'
gem 'simple_form'
gem 'font_awesome5_rails'
gem 'friendly_id', '~> 5.2.0'
gem 'tinymce-rails'
gem 'invisible_captcha'
gem 'figaro'
gem 'high_voltage', '~> 3.1'
gem 'bootstrap', '~> 5.1', '>= 5.1.3'
​
# FOR IMAGES
gem 'mini_magick'
gem 'aws-sdk' , '~> 3'
gem 'aws-sdk-s3', require: false
​
group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'pry-rails'
  gem 'better_errors'
end
​
group :development do
  gem 'web-console', '>= 4.1.0'
  gem 'rack-mini-profiler', '~> 2.0'
  gem 'listen', '~> 3.3'
  gem 'spring'
end
​
group :test do
  gem 'capybara', '>= 3.26'
  gem 'selenium-webdriver'
  gem 'webdrivers'
end
​

Here’s my application.js, which lives in ‘javascript/controllers/application.js but somehow also inassets/builds/application.js. I'm not using webpack, rather rollup installed with $ ./bin/rails javascript:install:rollup`:

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "controllers"
import 'offcanvas';

//= require jquery3
//= require jquery_ujs
//= require jquery-ui
//= require popper
//= require bootstrap
//= require activestorage
//= require font_awesome5
//= require tinymce



window.jQuery = $;
window.$ = $;

JavaScript
 
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "controllers"
import 'offcanvas';
​
//= require jquery3
//= require jquery_ujs
//= require jquery-ui
//= require popper
//= require bootstrap
//= require activestorage
//= require font_awesome5
//= require tinymce
​
​
​
window.jQuery = $;
window.$ = $;
​

Can anyone see where I’m going wrong?

Answer

I had the same problem.

I got things working by adding the bundle script from Bootstrap in the between the body tags of the application.html.erb file:

<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <%= yield %>
</body>

JavaScript
 
<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <%= yield %>
</body>
​
​

Advertisement

Answer