I recently set up my first Rails 7 app and successfully installed Bootstrap 5 with no CSS errors. However, I am facing an issue where the javascript functions like dropdown menus and offcanvas are not working as expected.
To test, I used the following code:
<script>
$( document ).ready(function() {
console.log( "document ready!" );
$( "#TEST" ).click(function() {
console.log( "clicked!" );
});
});
</script>
Both console.log statements provide the right output, indicating that jQuery and js are functioning correctly. The problem seems to lie with Bootstrap.
Below is a snippet from 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'
...
In addition, here's the content of my application.js, located in 'javascript/controllers/application.js' but also present in `assets/builds/application.js`. Instead of webpack, I'm using 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.$ = $;
If anyone can identify where the issue might be, I'd greatly appreciate it!