Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Initializing Modal through JS throws Uncaught TypeError: BACKDROP #33840

Closed
taka-oyama opened this issue May 6, 2021 · 10 comments · Fixed by #33853
Closed

Initializing Modal through JS throws Uncaught TypeError: BACKDROP #33840

taka-oyama opened this issue May 6, 2021 · 10 comments · Fixed by #33853
Labels
confirmed js p1 Critical, and inhibits core functionality v5

Comments

@taka-oyama
Copy link

taka-oyama commented May 6, 2021 •
edited
Loading

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
Copy link

kartik-v commented May 6, 2021 •
edited
Loading

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.

@kartik-v kartik-v mentioned this issue May 6, 2021
Closed
18 tasks
@boddunan boddunan mentioned this issue May 6, 2021
Merged
@darcome
Copy link

darcome commented May 6, 2021

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?

@tabuna tabuna mentioned this issue May 6, 2021
Closed
@GeoSot
Copy link
Member

GeoSot commented May 6, 2021 •
edited
Loading

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
Copy link
Contributor

boddunan commented May 7, 2021 •
edited
Loading

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.

@mattbuff-nynhp mattbuff-nynhp mentioned this issue May 7, 2021
Merged
@mscdex
Copy link

mscdex commented May 7, 2021 •
edited
Loading

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.

@MichalHecko MichalHecko mentioned this issue May 7, 2021
Closed
@alpadev
Copy link
Contributor

alpadev commented May 8, 2021 •
edited
Loading

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.

@alpadev alpadev added the p1 Critical, and inhibits core functionality label May 8, 2021
@alpadev alpadev mentioned this issue May 8, 2021
Closed
@connorhu
Copy link

connorhu commented May 8, 2021

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.

@tagliala tagliala mentioned this issue May 8, 2021
Merged
@ReLater ReLater mentioned this issue May 10, 2021
Merged
dae added a commit to ankitects/anki that referenced this issue May 11, 2021
@dae
roll back bootstrap until 5.0.1 comes out
63437f5 
Modals are currently broken:
twbs/bootstrap#33840
huacnlee added a commit to ruby-china/homeland that referenced this issue May 11, 2021
@huacnlee
Fix Bootstrap V5 load.
e120b88 
twbs/bootstrap#33840
@felipecalvo felipecalvo mentioned this issue May 11, 2021
Closed
@ShockwaveNN ShockwaveNN mentioned this issue May 11, 2021
Merged
@GeoSot GeoSot mentioned this issue May 13, 2021
Closed
@weaverryan weaverryan mentioned this issue May 24, 2021
Merged
@NotAsea
Copy link

NotAsea commented Mar 7, 2023 •
edited
Loading

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
Copy link
Member

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.

@gustaveWPM gustaveWPM mentioned this issue Mar 22, 2023
Closed
3 tasks
@tertek tertek mentioned this issue Apr 5, 2023
Closed
@tertek
Copy link

tertek commented Apr 24, 2023

In case anyone else stumbles here, this is what solved it for me:
#38307 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
confirmed js p1 Critical, and inhibits core functionality v5
Projects
None yet
Milestone
No milestone