search

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.14k stars 78.78k forks source link

Initializing Modal through JS throws Uncaught TypeError: BACKDROP #33840

Closed taka-oyama closed 3 years ago

taka-oyama commented 3 years ago

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>.

kartik-v commented 3 years ago

Agree with this issue. This happens in bootstrap 5.x production release irrespective of how you initialize the modal. Either dynamically via JS or via Data attributes.

Currently the workaround to overcome this issue is to load the bootstrap.bundle.js within the HTML body and not in the head. But it ideally cannot be the solution to this issue.

darcome commented 3 years ago

It happens to me too and it didn't happen in beta3. When can we expect a fix since this is (in my opinion) pretty serious?

GeoSot commented 3 years ago

Hey guys. Let's take it from the beginning.

Advising the Starter template and following the script loading best practices, your script tag, should be loaded at the end of the body element.

So the provided example is an anti-pattern, which at least could have the 'defer' attribute(which would guide to other problems)

I can confirm that the default option doesn't being initialized if the scripts is loaded before body.

So till be fixed, please try to load your script before body closing tag 🐰

boddunan commented 3 years ago

Loading script before closing of body tag is not an option in many cases, for example in a CMS. We should not restrict the users to load the scripts in body, bootstrap should work in either way.

mscdex commented 3 years ago

I also just encountered this same issue coming from 5.0.0-beta3 and realized what was happening before finding this GH issue. Forcing users to load the Bootstrap JS file in a specific way for no good reason is not a solution.

Additionally, as others have mentioned, it is sometimes not feasible or even possible to load scripts in the way being suggested.

alpadev commented 3 years ago

Guys, please calm down for a second. No one tries to enforce here something.

Like @GeoSot already mentioned, adding scripts into the <head> can be considered an antipattern, because it blocks the page rendering while the script files are downloaded and evaluated. One could argue that this should only be done, if your scripts really require it to be loaded upfront.

We adhere to the practise of putting our script tags at the end of the <body>, thus it didn't appear to be a problem while developing and testing our components. It was simply an oversight on our end and not something we did on purpose.

I understand, there are different requirements on a project and to load bootstrap in a certain way shouldn't be your concern. This is going to be addressed with the next release, but please accept, that we are all humans and errors can happen.

connorhu commented 3 years ago

The defer attribute on the script tag "solves" the issue (of course async attribute is not enough). If this will a "wontfix" at the end then we have a documentation issue.

NotAsea commented 1 year ago

facing this issue again with bootstrap 5.10 along with Asp.net core MVC 6, when try loading modal either with pure javascript or jQuery, it throws this error again, I have tried either put script in most near </body> tag or add defer attribute but this won't fix. HELP!!

julien-deramond commented 1 year ago

Hey @NotAsea This issue is closed. If you're facing a problem, please create a new issue referencing this one and include a live reproducible example. Otherwise, it's impossible for us to track already-closed stuff.

tertek commented 1 year ago

In case anyone else stumbles here, this is what solved it for me: https://github.com/twbs/bootstrap/issues/38307#issuecomment-1485570305