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

[rohith2810]

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 });

[luaz]

I bump into similar problem. Rather than initialize the modal upon mounting, I initialize it on demand.

let modal = null;
function getModal() {
  if (!modal) {
    modal = new $bootstrap.Modal('#test-modal');   
  }
  return modal
}

function toggleModal() {
  // modal.toggle();
  getModal().show()
}

[GeoSot]

modal1 = bootstrap.Modal.getOrCreateInstance('#modal1');

https://getbootstrap.com/docs/5.2/components/modal/#passing-options

getOrCreateInstance	Static method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialized.

[davidmoonraw]

This will log:

Uncaught TypeError: bootstrap.Modal.getInstance is not a constructor

Issue happens on bootstrap page itself. Inspect and run a test on console.

I tried some older versions and get different outputs:

Uncaught TypeError: t.querySelector is not a function

Uncaught ReferenceError: bootstrap is not defined

[hightowertech]

It shows my modal and the error. Someone said this error is from being passed an empty element, that isn't the case. GeoSot's solution also does not work. I tried setting the backdrop too.

modal.js:158 Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
at Ii._initializeBackDrop (modal.js:158:39)
at new Ii (modal.js:69:27)
at Ii.getOrCreateInstance (base-component.js:65:41)
at HTMLButtonElement. (modal.js:364:22)
at HTMLDocument.n (event-handler.js:118:19)

[jayna456]

Is there any solution for it? I am facing a similar issue and trying it since two days!

[aizazzaheer]

I had the same issues but when I used this, it worked fine.

export const openModal = (name) => {
  let modal = null;

  if (!modal) {
    var modalElement = document.getElementById(name);
    modal = new bootstrap.Modal(modalElement);
  }

  modal.show();
};

[non-bin]

Still no luck for me

[mobarak10]

i just remove this: data-bs-toggle="modal" from the button & works fine

[mobarak10]

i just remove this: data-bs-toggle="modal" from the button & works fine

[ofir2471]

But then the modal will not be opened :(