Блог

У меня проблема с моей реализацией начальной загрузки 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). Вот моя настройка вебпакера:

 // 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 = требуется(‘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