I have a working Rails 7 app that uses esbuild as the JS bundler and have imported bootstrap.
I am trying to figure out how to a access any Bootstrap Javascript functionality 'outside' the main application.js file - i.e. let's say I wanted to programatically show a Bootstrap modal on a particular page like this:
var myModal = new bootstrap.Modal(document.getElementById('helpModal'), {});
myModal.modal('show');
however this doesn't work as 'bootstrap' is not known:
Uncaught ReferenceError: bootstrap is not defined
...even though the page links in application.js:
<%= javascript_include_tag "application", defer: true %>
Any suggestions on how to access 'bootstrap' in JS outside application.js itself ?
Thank you !
Assuming you created your rails app with:
rails new APP_NAME --css=bootstrap ...
Which creates your app with ESBUILD and leaves you with a app/javascripts/application.js file looking like this:
// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
You now need to code in the modal to use the imported bootstrap.
Add the code you have in your question below the bootstrap import line:
// Modals
var myModal = new bootstrap.Modal(document.getElementById('helpModal'), {});
myModal.modal('show');
// Or to have it triggered using a button
document.getElementById('helpModalButton').addEventListener('click', event => {
myModal.show();
});
This will turn on the event handlers
More can be found on the Bootstrap Docs page for each of the Components (the same applies to Modals and Popovers)
https://getbootstrap.com/docs/5.1/components/modal/#passing-options