Rails 7 + esbuild环境下Bootstrap JavaScript无法工作求助

问题根源 #

你使用render "viewname", layout: false跳过了默认布局文件，导致esbuild打包后的application.js（包含你导入的Bootstrap）没有被加载到页面中。页面找不到Bootstrap的JS代码，自然会出现bootstrap未定义的报错；而直接引入CDN脚本是在视图内直接加载资源，所以功能正常。

解决方案 #

方案1：在视图中手动引入打包资源 #

在你的目标视图文件顶部添加以下ERB代码，手动引入Esbuild打包好的样式和脚本：

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload" %>
<%= csrf_meta_tags %>

添加后，页面会加载包含Bootstrap的application.js，下拉菜单即可正常触发。

方案2：使用专用简化布局 #

如果不想完全脱离布局，可以创建一个仅包含必要资源的极简布局：

1. 在app/views/layouts/目录下新建minimal_bootstrap.html.erb，内容如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  <%= javascript_include_tag "application", "data-turbo-track": "reload" %>
  <%= csrf_meta_tags %>
</head>
<body>
  <%= yield %>
</body>
</html>

2. 渲染视图时指定该布局：

render "viewname", layout: "minimal_bootstrap"

额外验证步骤 #

• 检查app/assets/builds/application.js是否存在：执行./bin/dev后，Esbuild会自动生成该打包文件，如果缺失，查看终端输出是否有Esbuild的编译报错（比如依赖未安装）。
• 可选手动初始化组件：若自动初始化失效，可在application.js中添加手动初始化代码：

import * as bootstrap from "bootstrap"

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(el => {
    new bootstrap.Dropdown(el)
  })
})

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