Application Error with Remix v2?

[genmon]

Current Behavior

Using ReactPlayer with Remix v2 out of the box triggers an Application Error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Expected Behavior

I would expect the player to appear, as it did in Remix v1.

Steps to Reproduce

I have a minimal repro here: remix-v2-reactplayer-minimal

This is the stock Remix v2 starter template

Other Information

I am not experienced with Remix v2 so it is possible I am missing something obvious. Would be grateful if anyone else could let me know whether I'm seeing an incompatibility, or if it's a setup problem.

[genmon]

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.

[tb-b]

I'm running into the same issue on Remix 2.1.0

[UncleGravity]

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

[dev-xo]

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!

[Varkoff]

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.

[bartling-cce]

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.

[SchattenGestalt]

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.

[goldcaddy77]

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>
  );
}

[SchattenGestalt]

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

[corbystephensdev]

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.

[pama1999]

is this a problem of remix or react-player?

[corbystephensdev]

Good question. I will add an update. I was getting a server vs client hydration error with the above setup. (react-player v2 BTW). I decided to update to react-player v3 canary 4 (I think). This fixed the hydration error, it also allowed me to use the /lazy version of the import which works fine.

So, maybe v3 of react-player fixes a few things?