Feeling a bit lost here, as I've tried several solutions from Stack Overflow related to getting bootstrap 5.2.3 javascript to work for a dropdown menu. Importmaps seem like the best approach, although esbuild was attempted with no luck.
Below is a snippet of my import maps setup:
pin 'application', preload: true
pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
pin_all_from 'app/javascript/controllers', under: 'controllers'
pin "bootstrap", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/lib/index.js"
My app/javascript/application.js
file looks like this:
import "@hotwired/turbo-rails"
import "controllers"
import "popper"
import "bootstrap"
And here's a relevant part from
app/views/layouts/application.html.erb
:
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<% if Rails.env.development? %>
<%= javascript_include_tag "hotwire-livereload", defer: true %>
Additionally, the app/assets/config/manifest.js
file contains:
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
This configuration generates the following HTML header:
<link rel="stylesheet" href="/assets/application-340caa07ce1bbb3e424a11977f38b20d7ad5bcd57480d126430e8962eb772287.css" data-turbo-track="reload">
<script type="importmap" data-turbo-track="reload">{
"imports": {
"application": "/assets/application-43b3188fdbcd45d694dc59d1f446d56b6a7895097320f451e1f8b34080dfcd63.js",
"@hotwired/turbo-rails": "/assets/turbo.min-96cbf52c71021ba210235aaeec4720012d2c1df7d2dab3770cfa49eea3bb09da.js",
"@hotwired/stimulus": "/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js",
"@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
"bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.js",
"@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/lib/index.js",
"controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
"controllers/current_link_controller": "/assets/controllers/current_link_controller-370b5b9f12a48b3c3c34f79e6d2782d26737770d0459437000dd110a50aead36.js",
"controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
}
}</script>
<link rel="modulepreload" href="/assets/application-43b3188fdbcd45d694dc59d1f446d56b6a7895097320f451e1f8b34080dfcd63.js">
<link rel="modulepreload" href="/assets/turbo.min-96cbf52c71021ba210235aaeec4720012d2c1df7d2dab3770cfa49eea3bb09da.js">
<link rel="modulepreload" href="/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js">
<link rel="modulepreload" href="/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js">
<script src="/assets/es-module-shims.min-606ae9c3279013fe751cee30f719a592f759e705edb66496812f3d9dbce3d850.js" async="async" data-turbo-track="reload"></script>
<script type="module">import "application"</script>
<script src="/assets/hotwire-livereload-69f109e9f29dd4f334a14c739a16f66d96595dcede55037f287ea8712288c0ae.js" defer="defer"></script>
The gemfile includes:
# Use Sass to process CSS
gem 'bootstrap', '~> 5.2.3'
gem 'sassc-rails', '2.1.2'
Lastly, puzzled by the bundling of bootstrap and popper in the application.css rather than being explicitly listed in the <link rel....> includes.