Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error with react router

See original GitHub issue

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) {
    render() {
        return (
                        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 {
} from "react-router-dom";

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

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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

zenyrcommented, Aug 26, 2021

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.


// 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} />
DummyPlyr.displayName = 'DummyPlyr';

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

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

errorElement v6.6.1 - React Router
Put an errorElement at the top of your route tree and handle nearly every error in your app in one place. Or, put...
Read more >
Can't resolve 'react-router-dom' - Stack Overflow
This error occurs because of react-router-dom npm package is missing. install them by using the above cmd. Share.
Read more >
Error boundary causes React Router links to stop working
When React Router's location changes, the parent functional component will dismiss its error state within the useEffect hook, and it will pass ...
Read more >
Module not found: Can't resolve 'react-router-dom' | bobbyhadz
To solve the error "Module not found: Error: Can't resolve 'react-router-dom'", make sure to install the react-router-dom package by opening your terminal ...
Read more >
Handling 404 Routes in React with a Not Found component
... for displaying an imfamous 404 Page Not Found error to the user. ... Inside the <Switch /> component from React Router, we...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found