Uncaught TypeError: Cannot read properties of null (reading 'removeEventListener')

[shaunkickbusch]

Currently getting an issue in regard to the eventListener clean up when the component unmounts. Error is: "Uncaught TypeError: Cannot read properties of null (reading 'removeEventListener')". It occurs in index.js with the following useEffect:

useEffect(() => {
playerEl.current.addEventListener('timeupdate', handleProgress)
playerEl.current.addEventListener('durationchange', handleDurationLoaded)
if (timeStart) {
seekToPlayer()
}
if (isPlaying) {
playerEl.current.play()
}

return () => {
  playerEl.current.removeEventListener('timeupdate', handleProgress)
  playerEl.current.removeEventListener('durationchange', handleDurationLoaded)
}

}, [])

Error occurs on the following lines:

  playerEl.current.removeEventListener('timeupdate', handleProgress)
  playerEl.current.removeEventListener('durationchange', handleDurationLoaded)

Seems as though the issue is marked as a "Potential issue" in React 17 is outlined by the Dev team here with a respective solution: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#potential-issues

If you could fix this it would be greatly appreciated.

[amittkSharma]

Please try to upgrade the package to version 7.0.10. And next week we will be having a newer version with some fixes and changes.

[shaunkickbusch]

This bug still occurs on 7.0.10, but looking forward to the newer version where this is potentially resolved. Cheers for all your work!

[amittkSharma]

A newer version is released (7.0.11) with the fix as per the react documentation. With new API also being exposed for onLoadedMetadata callback when a new video is loaded in the system

[shaunkickbusch]

Bug is all fixed now. Cheers mate!