为何Bootstrap 5折叠组件在shiny::bootstrapPage中无法工作？

下面是一个通过CDN引入Bootstrap 5依赖、用<div>标签实现的可正常运行页面，点击按钮能显示文本，示例基于Bootstrap 5.0官方文档：

library(shiny)
library(bslib)

# 可正常运行的代码
ui <- tags$div(
  includeCSS(path = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"),
  includeScript(path = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"),
  
  HTML('
  <p>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
      Button with data-bs-target
    </button>
  </p>
  <div class="collapse" id="collapseExample">
    <div class="card card-body">
      Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
    </div>
  </div>')
)

server <- function(input, output, session) {
}

shinyApp(ui, server)

问题描述 #

如果将上述代码切换为bootstrapPage（同时移除includeScript和includeCSS），并指定theme_version(5)，示例会失效，无法触发折叠效果。这是Bootstrap的标准功能，为何在指定Bootstrap 5版本的Shiny环境中无法正常工作？

原因与解决方案 #

核心原因 #

1. Bootstrap JS未加载：Shiny的bootstrapPage配合bslib主题时，只会自动引入Bootstrap的CSS样式，但不会自动加载Bootstrap的JavaScript文件。这是因为Shiny自身有独立的交互逻辑（依赖jQuery和自有JS），默认避免引入外部JS以防止冲突。而折叠（collapse）这类交互组件必须依赖Bootstrap JS（以及配套的Popper.js）才能触发显示/隐藏逻辑。
2. 旧写法兼容问题：theme_version(5)是bslib的旧版写法，推荐使用bs_theme(version = 5)来创建标准的Bootstrap 5主题。

修正后的代码 #

library(shiny)
library(bslib)

# 修正后可正常运行的bootstrapPage版本
ui <- bootstrapPage(
  theme = bs_theme(version = 5),
  # 手动引入Bootstrap 5的JS包（包含Popper.js）
  tags$script(src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"),
  
  HTML('
  <p>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
      Button with data-bs-target
    </button>
  </p>
  <div class="collapse" id="collapseExample">
    <div class="card card-body">
      Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
    </div>
  </div>')
)

server <- function(input, output, session) {
}

shinyApp(ui, server)

额外注意点 #

原代码的HTML片段中存在多余的</a>标签，会导致HTML结构错误，建议移除以避免潜在的渲染问题。

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