Rails 6引入data-confirm-modal报bootstrap modal插件未加载如何解决

报错场景 #

使用webpacker的Rails 6项目，引入bootstrap、jquery和data-confirm-modal依赖后，页面加载时Chrome调试器抛出错误：
Uncaught Error: The bootstrap modal plugin does not appear to be loaded.
排查后确认jQuery运行正常，$和$.fn均已定义，仅$.fn下缺少modal属性。

关联依赖版本 #

• ruby 2.7.4
• rails 6.0.4.1
• jquery 3.6.0
• bootstrap 5.1.0
• data-confirm-modal 1.6.2

原有配置参考 #

environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
      $: 'jquery/src/jquery',
      jQuery: 'jquery/src/jquery'
    })
)

module.exports = environment

application.js

require("@rails/ujs").start()
//require("turbolinks").start()  // gave reload bug... remove ?
require("@rails/activestorage").start()
require("channels")
//require("local-time").start()
require('jquery')

//import "./gems.js.erb"  # needs bundle exec rails webpacker:install:erb !
//import "./direct_uploads"

require('jquery-ui')

require('bootstrap')

window.jQuery = $;
window.$ = $;

import 'data-confirm-modal'

根因说明 #

data-confirm-modal 1.6.2版本暂不支持Bootstrap 5，Bootstrap 5调整了modal相关的实现逻辑，不再默认将modal方法挂载到jQuery的$.fn对象上，导致data-confirm-modal的组件存在性检测不通过。

解决方案 #

将Bootstrap版本从5.1.0降级到4.x版本即可解决该问题。

内容的提问来源于stack exchange，提问作者me1960