不能切换 Bootstrap 5 js 未正确初始化？

问题描述

我的 Bootstrap 5.0.0-beta2 实现有问题。我可以展开我的导航栏和手风琴，但不能折叠它们。

好像是js初始化的问题。

因为如果我加载一个没有元素的页面，然后浏览到一个有元素的页面（我的页面不会重新加载，因为我使用了 hotwire/Turbo），我可以展开和折叠它们。尽管切换时这些错误会打印到控制台：

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)

知道我应该怎么做吗？

我正在使用 webpack 为我的 Ruby on Rails 应用程序打包我的资产（使用 webpacker gem）。这是我的 webpacker 设置：

// 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

此外，我将分享一些图片来展示我在重新加载页面后切换时发生的转换。

我的原始状态是这样的。

切换导航栏时，它会按预期转换：

它最终处于展开状态：

但是当我按下导航栏切换图标时，导航栏不会折叠。相反，它会从展开状态（第二张图片）过渡到展开状态（第三张图片）。

解决方法

刚刚使用您的配置代码尝试了 Bootstrap 5.0.0-beta2、Rails 6.1。

问题似乎在于您加载 bootstrap 对象的方式，即该行：

// Conflict somehow
window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js')

您可以使用 const require 或 import 代替 Doc：

const bootstrap = require('bootstrap') 或 import bootstrap from 'bootstrap' 会将所有 Bootstrap 的插件加载到一个引导对象上。

const bootstrap = require('bootstrap') // or
import bootstrap from 'bootstrap'

或者您可以全局加载 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'],bootstrap: ['bootstrap']
  })
)

module.exports = environment