Bootstrap模态框展示报错求助：backdrop属性未定义

问题场景 #

尝试在Bootstrap中实现帮助文件的模态框展示功能，参照多篇教程操作后仍失败，抛出如下错误：

错误信息 #

Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
    at Ue._initializeBackDrop (bootstrap.min.js:6:32505)
    at new Ue (bootstrap.min.js:6:31412)
    at Ue.getOrCreateInstance (bootstrap.min.js:6:8240)
    at HTMLButtonElement.<anonymous> (bootstrap.min.js:6:35401)
    at HTMLDocument.s (bootstrap.min.js:6:4565)
_initializeBackDrop @ bootstrap.min.js:6
Ue @ bootstrap.min.js:6
getOrCreateInstance @ bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
s @ bootstrap.min.js:6
modal.js:160  Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
    at On._initializeBackDrop (modal.js:160:39)
    at new On (modal.js:71:27)
    at On.getOrCreateInstance (base-component.js:65:41)
    at HTMLButtonElement.<anonymous> (modal.js:365:22)
    at HTMLDocument.n (event-handler.js:118:19)

相关HTML代码 #

<div class="form-check form-switch m-0 gap-3">
  <button type="button" class="btn btn-block mb-3" data-bs-toggle="modal" data-bs-target="#modal_default">
                <img src="assets/img/help_icon.png">
            </button>
</div>

<div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
  <div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title font-weight-normal" id="modal-title-default">Type your modal title</h6>
        <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
                                   <span aria-hidden="true">×</span>
                              </button>
      </div>
      <div class="modal-body">
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn bg-gradient-primary">Save changes</button>
        <button type="button" class="btn btn-link  ml-auto" data-bs-dismiss="modal">Close</button>
      </div>
    </div>

问题根源及修复步骤 #

1. 触发按钮与模态框ID不匹配 #

触发按钮的data-bs-target="#modal_default"使用下划线命名，而模态框的id="modal-default"用的是中横线，Bootstrap无法定位到目标模态框元素，初始化时直接报错。
修复：统一ID格式，把按钮的data-bs-target改成#modal-default，或者把模态框的id改成modal_default，保持两者一致即可。

2. 无效的modal-dialog类 #

模态框的.modal-dialog节点上有两个无效的空类modal-：modal- modal-dialog-centered modal-，这类无效类会干扰Bootstrap组件的配置读取逻辑，引发属性未定义错误。
修复：清理无效类，保留合法的Bootstrap类，比如仅保留居中类，或者按需添加尺寸类：

<div class="modal-dialog modal-dialog-centered" role="document">

如果需要大尺寸模态框，可改为：

<div class="modal-dialog modal-lg modal-dialog-centered" role="document">

3. 重复引入Bootstrap JS文件 #

错误栈中同时出现了压缩版bootstrap.min.js和拆分的modal.js、base-component.js，说明页面重复引入了不同版本的Bootstrap JS，导致组件实例冲突，进而触发属性未定义问题。
修复：只保留一份Bootstrap JS引入，要么用完整的压缩版bootstrap.min.js，要么用未压缩的拆分组件文件，不要混合引入。

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