Log errors

package.json

@@ -19,7 +19,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "video.js": "^7.9.7",
-    "videojs-mux": "^3.1.1"
+    "videojs-mux": "^3.1.3"
   },
   "devDependencies": {
     "prettier": "2.1.2"

src/components/player2.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useState, useRef } from "react"
+import videojs from "video.js";
+import "video.js/dist/video-js.css";
+
+export default function Home() {
+  const videoRef = useRef(null);
+  const playerRef = useRef(null);
+
+  useEffect(() => {
+    if (!videoRef.current) {
+      return
+    }
+    const playerInitTime = Date.now();
+
+    playerRef.current = videojs(videoRef.current, {
+      sources: [{ src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" }],
+      autoplay: true,
+      muted: true,
+      controls: false,
+      fluid: true,
+      loop: true,
+      aspectRatio: '16:9',
+      preload: 'auto',
+    });
+
+    return () => {
+      if (playerRef.current) {
+        playerRef.current.dispose();
+      }
+    }
+  }, []);
+
+  return (
+    <div>
+      <video className="video-js" ref={videoRef} />
+    </div>
+  )
+}

src/pages/index.js

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { navigate } from 'gatsby';
 import Player from '../components/player';
 
 export default function Home() {
@@ -11,6 +12,7 @@ export default function Home() {
       <div style={{marginTop: '40px'}}>
         <button onClick={() => setIsMounted(true)}>Mount</button>
         <button onClick={() => setIsMounted(false)}>Dispose</button>
+        <button onClick={() => navigate('/two')}>Navigate to Page Two</button>
       </div>
     </div>
   )

src/pages/two.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { navigate } from 'gatsby';
+import Player from '../components/player2';
+
+const Two = () => {
+  return (
+    <>
+      <h2>Page Two</h2>
+      <Player />
+      <button onClick={() => navigate('/')}>Go Back</button>
+    </>
+  );
+}
+
+export default Two;

yarn.lock

@@ -12054,10 +12054,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/videojs-font/-/videojs-font-3.2.0.tgz#212c9d3f4e4ec3fa7345167d64316add35e92232"
   integrity sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==
 
-videojs-mux@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/videojs-mux/-/videojs-mux-3.1.1.tgz#857efaaade9634a31dcb4b751e182f3805e62e65"
-  integrity sha512-GBYsBZSv1JY37mCcUv3gjDOcis98zyXsUOHNBtYrh4AXlCRpPzZkSGh31N14Jvow2//m4cZUCruhb/2SXSac/A==
+videojs-mux@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/videojs-mux/-/videojs-mux-3.1.3.tgz#0a4f72452183da9e4ecd2a89919ac5670e718f19"
+  integrity sha512-9Kr22qunPEaisPq38BPU9H3g4j1Z7+HqdOB/Xu0EU5Jrk4MZLMOAWVRsTRLyu8tt/Hje3pGr3kx+zqF8DVWaXQ==
 
 videojs-vtt.js@^0.15.2:
   version "0.15.2"