How to accomplish a tree-shaken FilePlayer

[hooch]

Current Behavior

We use React Player within our SPA to play only self-hosted mp4 video recordings, and it works perfectly, but currently when we build our project for production the bundle still contains all the Youtube, Soundcloud, etc libraries.

When I try to import FilePlayer directly, no <video> tag is rendered, and no video plays.

Expected Behavior

Working video player and no Youtube, SoundCloud, etc libraries in the bundle.

Steps to Reproduce

I went through the project README and GitHub issues and tried every possible incantation that I could think of. For example:

import FilePlayer from 'react-player/file'
import { FilePlayer } from 'react-player'
import FilePlayer from 'react-player/lib/file'
import FilePlayer from 'react-player/lib/players/file'

Also noted that there were some issues with Vite so tried with the pre-release 3.0 version.

In all cases no video plays.

The only way I am able to get video working is by using import ReactPlayer from 'react-player' which of course brings all the Youtube, Soundcloud etc libraries into the bundle.

Environment

• vite 5.3.2
• react 18.3.1

Very curious to understand what I'm missing to help solve this. Thank you!

[rohithreddy]

found any solutions yet ? / also /file option does not work with google cloud storage files?

[udayodedara]

if you want to use only file player from React player then you need to import only file from react player.

import ReactPlayer from 'react-player/file'

now in build you wont see any other import other than file player.

[Codex-]

FYI this still works for v3, example:

import { createReactPlayer } from 'react-player/ReactPlayer';
import { canPlay } from 'react-player/patterns';
import HtmlPlayer from 'react-player/HtmlPlayer';

const fallbackPlayer = {
    key: 'html',
    name: 'html',
    canPlay: canPlay.html,
    canEnablePIP: () => true,
    player: HtmlPlayer,
};

export default createReactPlayer([], fallbackPlayer);

If you encounter type errors, set your module resolution to bundler or something other than node