A colleague has provided me with a workaround:

// @ts-ignore bundling issue with react-player
const Player = ReactPlayer.default as typeof ReactPlayer;

A bundling problem, perhaps similar to #193 from 2017? I'll leave this issue open as it may connect to something else.

I'm running into the same issue on Remix 2.1.0

Same issue here, I'm working around it by using ReactPlayer.default, which makes typescript unhappy.

This made it for me, also typescript it's happy about it:

import { useState } from 'react'
import ReactPlayer from 'react-player'
import Example_Video from '~/public/media/example-video.mov'
const Player = ReactPlayer.default
export function Video() {
 const [hasVideoLoaded, setHasIsVideoLoaded] = useState(false)
 return (
 <div className={`${hasVideoLoaded ? 'opacity-100' : 'opacity-0'} transition`}>
 <Player
 url={Example_Video}
 playing={true}
 muted={true}
 playsinline={true}
 onReady={() => setHasIsVideoLoaded(true)}
 />
 </div>
 )
}

Thanks to @genmon about the insights on it!

Same issue here. I tried your fix @dev-xo but there is a type error on the line const Player = ReactPlayer.default (property does not exist).

import ReactPlayer from 'react-player/youtube' works perfectly. But it doesn't work for Vimeo, for instance.

A colleague has provided me with a workaround:

// @ts-ignore bundling issue with react-player
const Player = ReactPlayer.default as typeof ReactPlayer;

A bundling problem, perhaps similar to #193 from 2017? I'll leave this issue open as it may connect to something else.

This issue is still present in Remix 2.4.1. We just switched to ESM module support and that switch demonstrated this issue. Using the above suggestion fixed our issue.

You saved my day. I was looking for a solution for days!!!

EDIT: Well. The solution helped in the first place, but when I refresh the page I get a slightly different error.

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

You can fix this with Client Only from remix-tools.

react-player.client.tsx:

import ReactPlayer from "react-player";
export default ReactPlayer;

video-player.tsx:

import { ClientOnly } from "~/components/client-only";
import ReactPlayer from "~/components/react-player.client";
export function VideoPlayer() {
 return (
 <ClientOnly fallback={<div>Video</div>}>
 {() => <ReactPlayer url={url} />}
 </ClientOnly>
 );
}

@goldcaddy77 Thx for your comment.
That is, what I have finally done, but didn't mentioned it here.

I don't know if anyone else tried this, but I got it working (basically) out of the box with Remix 2.10.2. I had to be specific with the media type/source, which means it might not be as flexible for some, or an opportunity for other creative workarounds.

I wanted to embed a player that plays the most recent podcast episode. For now I was only working with an MP3. Here is what I had to do to get it to load and display. (At some point I will be adding video, just needed to start with audio.

import React from "react";
import ReactPlayer from "react-player/file"; <--- Had to specify "file" to get MP3 to work.

react-player/lazy does not work for a universal loader. I suspect one has to specify the source of the media. As pointed out, /youtube works perfectly with a YouTube video. I haven't tested the other listed sources.

is this a problem of remix or react-player?