Uncaught TypeError on transition end when component re-renders

[tomzmtl]

I'm getting the following error when a toastr is dismissed (manual and auto):

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at onCSSTransitionEnd (utils.js:145)
    at ToastrBox._setTransition (ToastrBox.js:314)
    at ToastrBox._removeToastr (ToastrBox.js:298)

The null value here is node in onCSSTransitionEnd.

I think it is caused by the DOM element referenced not existing anymore at the time the toastr is dismissed. This issue started occuring when we started implementing a mix of toastr + view transition in our app. I figure the toastr node is being re-rendered at view transition, hence the loss of reference.

I don't know if there is a way to work around this, otherwise maybe toastr should check for the existence of the reference when onCSSTransitionEnd runs to avoid those errors.

Here is a sample of my component:

<div className={classes} data-route={route.name}>
  <Toastr />
  <div className="Main">
    <Sidebar />
    <div className="ViewContainer">
      <Header />
      {renderView(route, navigating)}
    </div>
  </div>
</div>

[mriosb]

+1 I'm having the same issue.

react version: 16.2.0
browser = Chrome Mobile
browser.name = Chrome Mobile device = M250
device.family = LG-M250
level = error logger = javascript
os = Android 7.0
os.name = Android
transaction = react-redux-toastr/lib/utils in apply

TypeError: Cannot read property 'addEventListener' of null at onCSSTransitionEnd (../node_modules/react-redux-toastr/lib/utils.js:145:1) at _setTransition (../node_modules/react-redux-toastr/lib/ToastrBox.js:314:1) at apply (../node_modules/react-redux-toastr/lib/ToastrBox.js:298:1)

[diegoddox]

Ok thanks, will take a look ASAP

[Razzwan]

The same on:

1. Mac OS X Version: 10.13.3,10.13.2; Chrome Version: 63.0.3239
2. Windows 10; Chrome Version: 63.0.3239
3. Windows 8.1; Chrome Version: 63.0.3239
4. Windows 7; Chrome Version: 64.0.3282

[shifubrams]

+1 same here

TypeError: Cannot read property 'addEventListener' of null
  at onCSSTransitionEnd(~/react-redux-toastr/lib/utils.js:145:1)
  at _setTransition(~/react-redux-toastr/lib/ToastrBox.js:314:1)
  at apply(~/react-redux-toastr/lib/ToastrBox.js:298:1)

do you have an idea about when it will be fixed ?
thanks :)

[diegoddox]

Unfortunately, I'm quite busy at the moment and I will not be able to prioritize/fix this issue

[NataSemka]

Hi. I'm having the same issue.

vendor.js?cb7e705e5b738f72d473:11 Uncaught TypeError: Cannot read property 'addEventListener' of null
at d (vendor.js?cb7e705e5b738f72d473:11)
at t._setTransition (vendor.js?cb7e705e5b738f72d473:126)
at t._removeToastr (vendor.js?cb7e705e5b738f72d473:126)

As @tomzmtl reported this error probably caused by the DOM element referenced not existing anymore at the time the toastr is dismissed.

Do you have any idea if it's could be fixed?
Thank you.

[diegoddox]

I believe this issue is already fixed, can you please tell me which version you're using @NataSemka ?

[diegoddox]

Because of inactivity I will close this issue but feel free to reopen in case anyone feels that this has to be addressed.