如何在Webpack Rails项目中初始化Bootstrap Popover

Question

所以我按照引导程序文档中的说明初始化popover，但它不起作用。它抛出了这个错误。我该如何解决这个问题？

Uncaught TypeError: bootstrap.Popover is not a constructor

这些是代码。

test_popover.html

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" 
data-bs-content="And here's some amazing content. It's very engaging. Right?">
Click
</button>

test_popover.js

...
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})

我已经在packs/application.js 中导入了引导程序

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

// Import Bootstrap only ones that are used to reduce size
import 'bootstrap';
import '../javascripts/test_popover';

Answer 1

这就是我修复它的方法。我导入Popover并从新的bootstrap.Popover()更改为new Popover()

import Popover from 'bootstrap/js/dist/popover';
document.addEventListener("turbolinks:load", function() {    
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new Popover(popoverTriggerEl)
})
});