Error with react router

Describe the bug I get this issue when i’m switching the route.

Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node. To Reproduce Steps to reproduce the behavior: 1.Create a video component. The source can be anything, even youtube.

import { Component } from "react";
import Plyr from "plyr-react";
import 'plyr-react/dist/plyr.css';

export default class VideoPlayer extends Component {
    constructor(props: any) {
        super(props);
    }
    render() {
        return (
            <Plyr
                source={
                    {
                        type: 'video',
                        title: 'Test Video',
                        sources: [
                            {
                                src: 'http://localhost:5000/video',
                                type: 'video/mp4',
                                size: 1080,
                            }
                        ],
                    }
                }
            />
        );
    }
}

2.Add routing:

import React, { Component } from 'react';
import Header from './Header';
import Users from './Users';
import { NotFoundPage } from '../pages/NotFoundPage';
import VideoPlayer from './VideoPlayer';
import {
  BrowserRouter,
  Switch,
  Route,
  Link
} from "react-router-dom";

class App extends Component<any> {
  render() {
    return (
      <BrowserRouter>
      <Header></Header>   
        <Switch>
          <Route exact path="/" render={(props) => <Users />} />
          <Route path="/watch" component={VideoPlayer} />
          <Route path="*" component={NotFoundPage} />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;

1. When going to an other route from localhost/videoplayer, i get the error described above and everything freezes. I got the same issue with other react-plyr npm packages.

Expected behavior Routing and video should work normally

[zenyr]

I think when <Plyr {...} /> gets directly REPLACED within react lifecycle, react tries to unmount video but it’s just not there, as Plyr already replaced it with div.plyr 😃

To work-around this without a major version up (changing <Plyr/> to keep a topmost element) you should always replace an ancestor of <Plyr /> to avoid accessing the <video /> tag.

Workaround

// BOOM -- <video/> -> <img/>, but no <video/>!
<div>{isMediaYoutube ? <Plyr source={stablePlyrSource} options={PLYR_OPTIONS} /> : <img src={media} />}</div>


// Just wrap it™️
const DummyPlyr: typeof Plyr = forwardRef((props, ref) => (
  <div>{/* this <div/> will not go away */}
    <Plyr ref={ref} {...props} />
  </div>
));
DummyPlyr.displayName = 'DummyPlyr';

// NO BOOM -- <div/> -> <img/>, ez
<div>{isMediaYoutube ? <DummyPlyr source={stablePlyrSource} options={PLYR_OPTIONS} /> : <img src={media} />}</div>

[Qiming-Liu]

https://github.com/chintan9/plyr-react/issues/562#issuecomment-906618738

I had this problem today, wrapping a div to the component solved it.