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

Question

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

Voting to close as I wasn't able to reproduce the problem. There don't appear to be any similar bugs reported on [Bootstrap GitHub](https://github.com/twbs/bootstrap/issues?q=backdrop), but you could open a new issue. There is also a new version of Bootstrap 5.2.2, though the changes to modal seem unrelated to this issue. — Yogi, Oct 12 '22 at 12:09
I get the same error while trying to do this in react. `Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop') at Modal._initializeBackDrop (modal.js:158:39) at new Modal (modal.js:69:27) at Modal.getOrCreateInstance (base-component.js:65:41) at HTMLAnchorElement. (modal.js:364:22) at HTMLDocument.handler (event-handler.js:118:19)` — Alan Dsilva, Dec 24 '22 at 08:19
I have had the same issue, i just added to this `type="button"` to the button invoking the modal and it solved the issue. — abhishek bagul, Feb 14 '23 at 06:43
I am getting the same error as Alin Dsilva and tried Abishek's solution - it did not work. — Steve Smith, Mar 30 '23 at 03:15

score 1 · Answer 1 · answered Feb 18 '23 at 21:08

I'm using Vue 3 and Bootstrap 5.2.3. I'm trying to show a Modal that I had created and received the exact same error as you did. Here's what the problem was.

Vue has various lifecycle events that can be plugged into to perform actions. Initially I was doing this work in the setup stage:

<script>
import { Modal } from 'bootstrap'
export default {
  name: 'MyModal',
  setup() { <-- Too early
    const myModal = new Modal(document.getElementById('my-modal'), {})
    myModal.show()
  }
}
</script>

The problem is that the Modal has not been loaded into the DOM at this stage and therefore is undefined when the getElementById action is performed. The solution was to wait until the DOM is loaded by using the mounted stage like so:

<script>
import { Modal } from 'bootstrap'
export default {
  name: 'MyModal',
  mounted() { <-- Just right
    const myModal = new Modal(document.getElementById('my-modal'), {})
    myModal.show()
  }
}
</script>

If you're not using Vue the answer should be similar. Perform the getElementById action in an event callback function that fires only after the DOM is loaded for instance DOMContentLoaded

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

1 Answers1