bootstrap: TypeError Cannot read properties of undefined (reading 'backdrop') - bootstrap v5.2.1 modal

Discussed in https://github.com/twbs/bootstrap/discussions/37304

<div type='discussions-op-text'>

^{Originally posted by rohith2810 October 12, 2022} While using bootstrap modal I am facing this error ( TypeError Cannot read properties of undefined (reading ‘backdrop’) ) , which is tracked by our bug tracker, but I am unable to recreate this error. I tried recreating error with various browsers, browser versions, OS. This issue is not showing up on all browsers.

Bootstrap version used - v5.2.1

I initialized modal using JavaScript

if (bootstrap == undefined) {
    document.getElementById("browser-not-supported-container").classList.remove("d-none");
} else {
    modal1 = new bootstrap.Modal(document.getElementById('modal1'));
    modal2 = new bootstrap.Modal(document.getElementById('modal2'));
    modal3 = new bootstrap.Modal(document.getElementById('modal3'));
}

Html code for these modals

<!-- Modal 1-->
<div class="modal fade text-start" data-bs-backdrop="static" data-bs-keyboard="false" id="modal1" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <!-- Header -->
            </div>
            <div class="modal-body">
                <!-- Body -->
            </div>
        </div>
    </div>
</div>

<!-- Modal 2-->
<div class="modal fade text-start" id="modal2" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <!-- Body -->
            </div>
        </div>
    </div>
</div>

<!-- Modal 3-->
<div class="modal fade text-start" id="modal3" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <!-- Body -->
            </div>
        </div>
    </div>
</div>

The exact error is:

TypeError Cannot read properties of undefined (reading 'backdrop') 
    https://example.com/:lineNo3:colNo3 Ni._initializeBackDrop
    https://example.com/:lineNo2:colNo2 new Ni
    https://example.com/:lineNo1:colNo1 HTMLDocument.<anonymous>

Note: lineNo1 is where modal2 is initializing

I also tried with modal options but error is still persisting

modal1 = new bootstrap.Modal(document.getElementById('modal1'), { backdrop: "static", keyboard: false });
modal2 = new bootstrap.Modal(document.getElementById('modal2'), { backdrop: "static", keyboard: false });
modal3 = new bootstrap.Modal(document.getElementById('modal3'), { backdrop: "static", keyboard: false });