toast.js : Cannot read properties of null (reading 'classList')

[lekoala]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I'm having the following issue in production on one website

Cannot read properties of null (reading 'classList')

At the lines

bootstrap/js/src/toast.js

Lines 114 to 116 in bf6240d

	this._element.classList.add(CLASS_NAME_HIDE) // @deprecated
	this._element.classList.remove(CLASS_NAME_SHOWING, CLASS_NAME_SHOW)
	EventHandler.trigger(this._element, EVENT_HIDDEN)

My guess is that the element is already removed when that callback is called (i'm calling .dispose in the bs.hidden callback event I don't know if that's related or not. it should work without issues either way in my opinion).

Reduced test cases

My proposal is to simply add a null check before and return early if this._element is null

Demo
https://codepen.io/lekoalabe/pen/oNdPNXJ

click create modal
click create toast
accept sweet alert modal
try to click close icon on toast => it triggers the error

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.2.2

[github-actions]

Hello @lekoala. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or StackBlitz and report back with your link, Bootstrap version, and specific browser and Operating System details.

[lekoala]

ok so it's kind of hard to replicate but here it goes

https://codepen.io/lekoalabe/pen/oNdPNXJ

it can trigger a variety of errors I've listed in the codepen

i have to admit it's a bit extreme to have sweetalert, modals and toasts all over the place, but it shouldn't create js error anyway

you have to click around a fair bit to trigger the various error. the toast error is caused like this:

• click create modal
• click create toast
• accept sweet alert modal
• try to click close icon on toast => it triggers the error

[debadutta98]

ok so it's kind of hard to replicate but here it goes

https://codepen.io/lekoalabe/pen/oNdPNXJ

it can trigger a variety of errors I've listed in the codepen

i have to admit it's a bit extreme to have sweetalert, modals and toasts all over the place, but it shouldn't create js error anyway

you have to click around a fair bit to trigger the various error. the toast error is caused like this:

• click create modal
• click create toast
• accept sweet alert modal
• try to click close icon on toast => it triggers the error

This issue is related to #37245

[lekoala]

@debadutta98 seems more complex than what I thought!

[lekoala]

i'm not sure adding null checks will fix the root cause, but at least it would prevent js errors. these errors don't seem to prevent expected behaviour, so I think it should be pretty safe to add them.

[GeoSot]

I had a "quick" look to the given codepen.

• You have imported the bootstrap.bundle.js twice, that was causing modal.js:357 Uncaught TypeError: Cannot read properties of null (reading 'hide')

• plus, I couldn't spot any referral to bootstrap.Toast 😖

Is a bit strange to find an error on bootstrap toast, without using it. 😵‍💫

[lekoala]

@GeoSot sorry about that indeed i tried a couple of variations and indeed i left a duplicate import. without it i dont have the issue anymore (it still happens (without duplicates) in prod in another app but it's hard to replicate the exact setup).
not sure why importing twice would break everything though?

I'm using a "toaster" helper method that calls new bootstrap.Toast under the hood, i can extract this helper if that makes anything clearer but in any case, without the duplicate import i didn't find a way to replicate my issue

[GeoSot]

For sure, I can try to help only if you use the Bs components explicitly, and not inside another library. It is not possible to guess any side effects

[lekoala]

@GeoSot so i managed to replicate it finally!
basically it's very tricky to get it by hand, which is why it happens rarely
if you click or double click on the close icon right when it's supposed to close, it may fail
I've simulated this with a setTimeout