Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

Initializing Modal through JS throws Uncaught TypeError: BACKDROP

Created by: taka-oyama

Upgraded from v5 beta 3 to v5 seems to have broken dynamic modal.

When I do

<script>
    var modal = document.getElementById('modal-test');
    new bootstrap.Modal(modal).show();
</script>

I get the following error:

Uncaught TypeError: BACKDROP: Option "rootElement" provided type "null" but expected type "element".
    at index.js:130
    at Array.forEach (<anonymous>)
    at l (index.js:124)
    at xe._getConfig (backdrop.js:92)
    at new xe (backdrop.js:33)
    at Ne._initializeBackDrop (modal.js:218)
    at new Ne (modal.js:84)
    at modal.html:27

Please checkout the details by checking out the snippet below.

https://jsbin.com/tikogemofi/edit?html,console

This only seems to happen if I put the bootstrap JS file in <head>.

By debugging for a bit, I was able to see that the code below

https://github.com/twbs/bootstrap/blob/main/js/src/util/backdrop.js#L14

was set to null.

This error probably occurred because document.body does not exist yet when the JS gets loaded in <head>.