I seem to be encountering an issue with my implementation of Bootstrap 5.0.0-beta2. While I can expand my navbars and accordions successfully, collapsing them does not work as expected.
It appears that the problem lies in the initialization of the JavaScript.
Interestingly, when I navigate from a page without these elements to a page containing them (thanks to hotwire/Turbo which prevents full page reloads), both expansion and collapse functionalities work. However, I do see some errors in the console related to toggling:
Uncaught TypeError: No method named "toggle"
at Function.collapseInterface (bootstrap.bundle.js:1942)
at bootstrap.bundle.js:2001
at Array.forEach (<anonymous>)
at HTMLButtonElement.<anonymous> (bootstrap.bundle.js:1985)
at HTMLDocument.handler (bootstrap.bundle.js:414)
Any suggestions on what could be done differently to resolve this?
For context, I am using webpack to bundle assets for my Ruby on Rails application (leveraging the webpacker gem). Below is my webpacker configuration:
// app/javascript/packs/application.js
import Rails from "@rails/ujs"
import { Turbo } from "@hotwired/turbo-rails"
import "bootstrap"
import "../stylesheets/application"
window.Turbo = Turbo
window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js')
Rails.start()
/* app/javascript/stylesheets/application.scss */
@import "~bootstrap/scss/bootstrap";
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
Rails: '@rails/ujs',
Popper: ['popper.js', 'default']
})
)
module.exports = environment
In addition, I have included some images showcasing the transitions when toggling after refreshing the page.
Here is the initial state:
https://i.sstatic.net/LYN9L.jpg
Upon toggling the navbar, it transitions as expected:
https://i.sstatic.net/YbU64.jpg
After expanding, it remains in the expanded state:
https://i.sstatic.net/ybW2D.jpg
However, pressing the navbar-toggler icon does not result in collapsing the navbar. Instead, it goes through the expanding animation (similar to the second image) and ends up expanded (like the third image).