Get DOMException using in React

[zhulduz]

Hi!
I embed video.js in React component according to spec https://docs.videojs.com/tutorial-react.html.
After closing page with video player (I use react-router), I get an error Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. It happens because of a method this.player.dispose()

I noticed that removing an attribute data-vjs-player from wrapper div resolves my problem.

Have you any idea how I need to fix this issue?
Thanks in advance)

[gkatsev]

This is because calling dispose removes itself from the page. Probably not ideal but that's how it is now and we can't change it. I wonder if we should update the example to wrap the player-div in another div? Or even update it to use the video-js element.
Something like:

<div>
  <div data-vjs-player>
    <video>
  </div>
</div>

<div>
  <video-js></video-js>
</div>

This way, the outerdiv is basically the component's main element and thus when Video.js is disposed and the <div data-vjs-player> or <video-js> elements are removed it doesn't cause an issue.

Would you be able to give this a try and if it works, make a PR to fix the doc?

[zhulduz]

Sorry for the delay. Both methods work correctly! Thanks)

I guess I will manage to make PR with fixed docs)

[dylanjha]

This was tripping me up too. Thank you for posting the solution and updating the docs @zhulduz