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.