Application Error with Remix v2?

[genmon]

trafficstars

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.