Boostrap JS - Not working in rails 7 with jsbundler - ruby-on-rails

Question

I ran the create using the jsbundler and cssbundler, it installed the appropiate files.
$ rails new app -j esbuild --css bootstrap
I created a navbar from the bootstrap doc on a partial and rendered on the application.html.erb
but when I run
$ ./bin/dev
on the navbar when I click on the dropdown or the hamburger button nothing happens
<!--./app/views/shared/_navbar.html.erb-->
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Also, I tryed importmap bootstrap but nothing seems to work.

Answer 1

You need to import bootstrap js files in your application.js, like that:
import "#hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
document.addEventListener("turbo:load", () => {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
})
Reference: https://github.com/gorails-screencasts/bootstrap-css-bundling

Answer 2

Have you checked if the required bootstrap bundle js file is properly loaded?
Instead of using the asset pipeline why don't you add the required CSS and JS CDN links of bootstrap under the head tags in the application.html.erb file. I used this in my internship project and it works really well.