react-player: import ReactPlayer from 'react-player/lazy' fails with vite

Current Behavior

The app crashes with the following error:

Uncaught Error: Element type is invalid. Received a promise that resolves to: [object Object]. Lazy element type must resolve to a class or function. at mountLazyComponent (react-dom_client.js?v=53134127:14671:17) at beginWork (react-dom_client.js?v=53134127:15653:22) at beginWork$1 (react-dom_client.js?v=53134127:18882:22) at performUnitOfWork (react-dom_client.js?v=53134127:18358:20) at workLoopSync (react-dom_client.js?v=53134127:18298:13) at renderRootSync (react-dom_client.js?v=53134127:18277:15) at recoverFromConcurrentError (react-dom_client.js?v=53134127:17900:28) at performConcurrentWorkOnRoot (react-dom_client.js?v=53134127:17848:30) at workLoop (react-dom_client.js?v=53134127:195:42) at flushWork (react-dom_client.js?v=53134127:174:22) mountLazyComponent @ react-dom_client.js?v=53134127:14671 beginWork @ react-dom_client.js?v=53134127:15653 beginWork$1 @ react-dom_client.js?v=53134127:18882 performUnitOfWork @ react-dom_client.js?v=53134127:18358 workLoopSync @ react-dom_client.js?v=53134127:18298 renderRootSync @ react-dom_client.js?v=53134127:18277 recoverFromConcurrentError @ react-dom_client.js?v=53134127:17900 performConcurrentWorkOnRoot @ react-dom_client.js?v=53134127:17848 workLoop @ react-dom_client.js?v=53134127:195 flushWork @ react-dom_client.js?v=53134127:174 performWorkUntilDeadline @ react-dom_client.js?v=53134127:382 Show 11 more frames

Expected Behavior

I expect the video to load

Steps to Reproduce

Download my minimal example: https://github.com/DouglasDev/vite-react-player-bug
run npm i
run npm run dev
The app will crash

Environment

URL attempting to play: any
Browser: chrome v 100
Operating system: mac

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 11
Comments: 15 (4 by maintainers)

Most upvoted comments

I’m still having this issue using React Player in an app that builds with Vite. App crashes in dev but works in production using react-player/lazy. Is there a workaround for this?

LWest001 on Feb 8, 2023

I’m getting the same error. Anyone with a solution?

mutheusalmeida on Aug 26, 2022

@cookpete Haven’t had time to write a fix but I think the issue is that vite uses native ESM imports whereas ReactPlayer appears to use ESM in the source code but exports CommonJS in the npm package. So I think just adding an untransformed ESM version to the npm package would fix the bug.

DouglasDev on May 10, 2022

Hi @cookpete! Do you think we could reopen this issue (at least for clarity sake)? Thank you so much!

GabrielCousin on May 2, 2023

It seems like my implementation of lazy loading players is prone to errors. I am open to better suggestions.

Would it be better to just have a component that accepts a players array and you just import anything that you need? eg:

import ReactPlayerCustom from 'react-player/custom'
import Youtube from 'react-player/youtube'
import Facebook from 'react-player/facebook'

<ReactPlayerCustom players={[Youtube, Facebook]} etc etc />

cookpete on May 3, 2022