Rails使用esbuild+JSBundler/CSSBundler时Bootstrap Modals失效无报错

问题排查与解决步骤 #

你遇到的Bootstrap Modal无响应问题是JS Bundling Rails + esbuild 搭配Turbo的常见配置冲突，按以下步骤逐一修复即可：

1. 清理冗余入口文件 #

你当前同时存在两个JS入口，会导致依赖加载冲突：

• 保留 esbuild 专用入口 app/javascript/application.js
• 删除旧 Webpacker 遗留的 app/javascript/packs/application.js

2. 全局挂载 Bootstrap 实例 #

esbuild 默认将依赖封装在模块作用域内，Bootstrap 自带的 data-bs-* 属性自动绑定功能需要全局可访问的 Bootstrap 实例，修改 app/javascript/application.js 新增全局挂载逻辑，同时补全 Modal 组件初始化：

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
import './channels/**/*_channel.js'
import "./src/**/*"

// 全局挂载Bootstrap供data属性调用
window.bootstrap = bootstrap

const initBootstrapComponents = () => {
  // 初始化Tooltip
  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
    if (el._bootstrapTooltip) el._bootstrapTooltip.dispose()
    new bootstrap.Tooltip(el)
  })
  // 初始化Popover
  document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => {
    if (el._bootstrapPopover) el._bootstrapPopover.dispose()
    new bootstrap.Popover(el)
  })
  // 初始化Modal触发按钮
  document.querySelectorAll('[data-bs-toggle="modal"]').forEach(el => {
    const targetModal = document.querySelector(el.dataset.bsTarget)
    if (!targetModal) return
    if (targetModal._bootstrapModal) targetModal._bootstrapModal.dispose()
    new bootstrap.Modal(targetModal)
  })
}

// 覆盖Turbo所有页面加载/渲染场景
document.addEventListener("turbo:load", initBootstrapComponents)
document.addEventListener("turbo:render", initBootstrapComponents)
document.addEventListener("turbo:frame-load", initBootstrapComponents)

3. 校验布局文件的JS引入 #

确认全局布局 app/views/layouts/application.html.erb 中引入的是esbuild打包后的产物，替换旧的 javascript_pack_tag：

<%# 正确的esbuild打包产物引入方式 %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>

<%# 删除旧的Webpacker引入逻辑 %>
<%# <%= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %> %>

4. 校验Modal HTML结构 #

确认模态框触发按钮与容器使用的是Bootstrap 5的属性命名，不要混用Bootstrap 4的旧属性：

• 触发按钮必须包含 data-bs-toggle="modal" + data-bs-target="#你的模态框ID"
• 模态框容器id与data-bs-target完全匹配，结构符合Bootstrap 5官方规范

完成以上修改后重启开发服务器，清空浏览器缓存重新测试即可。

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