Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created a year ago
Reactions:8
Comments:9 (2 by maintainers)

Top GitHub Comments

2reactions

mutheuscommented, Aug 26, 2022

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

2reactions

DouglasDevcommented, May 10, 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.

Top Results From Across the Web

react-player - npm

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and ...

Newest 'react-player' Questions - Stack Overflow

I am trying to include videos in my react project for that I am using ReactPlayer by cookpete. Now the problem is it...

element type is invalid. received a promise that resolves to

React.lazy takes a function that must call a dynamic import() . ... cookpete/react-playerimport ReactPlayer from 'react-player/lazy' fails with vite#1443.

ReactPlayer - Best of JS

import React from 'react' import ReactPlayer from 'react-player/lazy' // Lazy ... when state changes to unstarted (usually when video fails to autoplay).

react-player/MIGRATING.md - UNPKG

2`, if your build system supports `import()` statements, use `react-player/lazy` to [lazy load](https://reactjs.org/docs/code-splitting.html#reactlazy) the ...