`ReactPlayer` not working in React 17
See original GitHub issueCurrent Behavior
When using the out-of-the-box ReactPlayer
and provided any url, in this case it’s a YouTube link, the React Player component fails to render and throws this error in the console.
Uncaught undefined
The above error occurred in one of your React components:
in Unknown (created by Player)
in Player (created by ReactPlayer)
in Suspense (created by ReactPlayer)
in div (created by ReactPlayer)
in ReactPlayer
Expected Behavior
The embedded YouTube video should be present on-screen.
Steps to Reproduce
- `import ReactPlayer from ‘react-player’
- Render the component like
<ReactPlayer url={url} />
whereurl
is any link - View the thrown error in the console
Current packages
...
"react-player": "2.10.0",
"react": "17.0.2",
"react-dom": "17.0.2",
...
Other Information
I’ve seen similar issues in the past closed, but they don’t seem to address my case since i’m not using @hot-loader/react-dom
or NextJS:
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:5 (1 by maintainers)
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 ...
Read more >react-player | Yarn - Package Manager
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion ...
Read more >react-player/MIGRATING.md - UNPKG
17, ```. 18. 19, Lazy players were the default import in `v2.1`, but moved to `react-player/lazy` in `v2.2` to avoid causing problems with...
Read more >Trying to use react-player throws a Hydration error
It does seem like a bandaid fix however, because I don't think it solves the root problem. import dynamic from 'next/dynamic' const ReactPlayer ......
Read more >Strict Mode - React
StrictMode is a tool for highlighting potential problems in an application. Like Fragment , StrictMode does not render any visible UI.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Aw, since I updated react-dom to ^17.0.2 it works for me.
@cookpete Unfortunately, the repo where I’m experiencing these issues is private. I manage all my packages since I’m not using a solution like
create-react-app
. Would you know of other possible packages that could interfere withreact-player
to cause this issue?@spereira2017 I can try to see if that works!