Rails 7使用Importmap时Bootstrap JS自定义代码报错问题

问题分析 #

通过data属性触发的Bootstrap功能正常，说明基础JS已加载，但自定义代码无法访问bootstrap.Popover构造函数，核心原因是模块导入方式或Importmap配置不符合Bootstrap 5的ES模块规范。

修复步骤 #

1. 修正config/importmap.rb配置 #

Bootstrap 5依赖的是@popperjs/core而非旧版popper.js，且需指向gem中正确的未压缩ES模块文件（压缩版bootstrap.min.js可能未正确导出模块）：

pin "@popperjs/core", to: "popper.js", preload: true
pin "bootstrap", to: "bootstrap.js", preload: true

2. 移除config/initializers/assets.rb中的多余配置 #

Importmap会自动处理模块加载，无需手动将Bootstrap和Popper的JS加入预编译列表，删除以下内容：

Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )

3. 调整application.js的导入逻辑 #

确保正确导入并按需全局暴露Bootstrap模块，同时增加元素存在性判断避免额外报错：

import "@popperjs/core"
import * as bootstrap from "bootstrap"

// 全局挂载bootstrap对象，确保Turbo加载的页面能访问到
window.bootstrap = bootstrap

document.addEventListener("turbo:load", function() {
  const popoverElement = document.getElementById('example')
  if (popoverElement) {
    new bootstrap.Popover(popoverElement)
  }
})

关键说明 #

• 未压缩的bootstrap.js包含完整ES模块导出，能正确暴露Popover等构造函数
• 全局挂载window.bootstrap适配Turbo页面加载机制，避免作用域访问问题
• 元素存在性判断可防止页面元素未加载时触发的报错

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