My Rails 7 project was created with the
-c bootstrap option, so (from what I learned)
esbuild is being used.
application.js file contained:
import "@hotwired/turbo-rails" import "./controllers" import * as bootstrap from "bootstrap" import jquery from 'jquery' window.$ = jquery
I believe I added the last two lines at some point in the process of trying to get jQuery to work (honestly I’ve mucked about so much with these issues that I can’t even remember) but otherwise these were generated by the template. I can confirm jQuery was imported properly, using the js console in Chrome dev tools.
My application had a bootstrap-styled page with collapsing dropdown menus, but clicking on it would not trigger the dropdown effect. It turns out (as I checked in dev tools console) that the dropdown function was not being imported properly, and after much searching and time wastage, I got it to work by replacing the (template-generated)
* import in
import "bootstrap/js/dist/dropdown" to import just that particular function.
So where am I going wrong? Shouldn’t I expect the bootstrap js library to be configured correctly by the template? Did my import of
jquery mess up something?
I know a kind soul in another thread suggested using something called UJS but I don’t have the time or energy right now to start looking into a new (old?) approach.
If I had another couple of weeks, I think I would’ve dropped Rails altogether and tried to find a slightly less insane python-based framework and start over, but unfortunately I’m stuck with it. (I know I’m being unfair, I’m sure it’s good if you know what you’re doing… needed to vent again.)