Mux Player Not Working in Next13 App

[namekendrick]

Current Behavior

I'm importing react-player/lazy into my Nextjs app and although I can see the <mux-player> element when I go to inspect, it's missing all of its children (i.e. the player doesn't actually render in my app). I'm also receiving Critical dependency: the request of a dependency is an expression but unsure if it's related.

Expected Behavior

To import react-player/lazy and see the Mux player load in my app when I pass url={'https://stream.mux.com/${playbackId}'}

Other Information

When I replace the mux url with a Youtube url it works just fine.

I'm also importing the component using next/dynamic if that helps.

Some other things I've tried are:

• importing not using next/dynamic
• importing just react-player... importing react-player/mux
• appending .m3u8 at the end of the url (the full playback url in Mux)

import { useState } from "react";
import dynamic from "next/dynamic";

const ReactPlayer = dynamic(() => import("react-player/lazy"), {
  ssr: false,
});

export default function VideoPlayer({ playbackId }) {
  const [playerState, setPlayerState] = useState({
    url: `https://stream.mux.com/${playbackId}`,
    playing: true,
    muted: true,
    playsinline: true,
  });

  const { url, playing, muted, playsinline } = playerState;

  return (
    <div
      className="relative m-auto flex max-w-7xl overflow-hidden pt-[56.25%]"
    >
      <div className="absolute left-0 top-0 h-full w-full">
        <ReactPlayer
          url={url}
          playing={playing}
          muted={muted}
          playsinline={playsinline}
        />
      </div>
    </div>
  );
}

Some dependencies that might be useful:

 {
    "@mux/mux-node": "^8.0.0",
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-player": "^2.15.0",
  },

When I inspect:

[luwes]

this should be fixed in v2.15.1

I got this working locally

'use client';

import React from 'react'
import dynamic from "next/dynamic";

const ReactPlayer = dynamic(() => import("react-player/lazy"), {
  ssr: false,
});

export default function Player() {
  return (
    <div>
      <ReactPlayer controls={false} url='https://www.youtube.com/watch?v=oUFJJNQGwhk' />

      <br/>

      <ReactPlayer controls={true} url='https://stream.mux.com/maVbJv2GSYNRgS02kPXOOGdJMWGU1mkA019ZUjYE7VU7k' />
    </div>
  )
}