Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Initializing Modal through JS throws Uncaught TypeError: BACKDROP
See original GitHub issueUpgraded 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>.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:18
- Comments:7 (3 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
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.
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.