'ReactPlayer' cannot be used as a JSX component
See original GitHub issueCurrent Behavior
- I receive the following error when trying to use Reac-player:
JSX element class does not support attributes because it does not have a 'props' property.
Expected Behavior
I followed the instructions exactly using the following example code for the react-player component:
<ReactPlayer url="https://www.youtube.com/watch?v=ysz5S6PUM-U" />
Steps to Reproduce
- Yarn add react-player
- Add 'import ReactPlayer from ‘react-player’ in your file
- Add
<ReactPlayer url="https://www.youtube.com/watch?v=ysz5S6PUM-U" />
to your functional component
Environment
- URL attempting to play: “https://www.youtube.com/watch?v=ysz5S6PUM-U”
- Browser: Chrome
- Operating system: MacOs
Other Information
I have a Typescript project. A similar issue was posted and for them deleting “flexbox-react” helped but I have no such dependency.
I have tried it in a sandbox, with react and typescript, and it works perfectly there so it must be something with my app, but I am not sure how to figure that out. I would appreciate any insight on this!
The screenshot below is of some warnings I received when installing the package.
![Screenshot 2022-02-24 at 09 21 17](https://user-images.githubusercontent.com/77123544/155495776-d6600df6-137a-41ea-8473-0fc06069c146.png)
The error:
Issue Analytics
- State:
- Created 2 years ago
- Reactions:4
- Comments:8 (1 by maintainers)
Top Results From Across the Web
'ReactPlayer' cannot be used as a JSX component
'ReactPlayer' cannot be used as a JSX component. Its instance type 'ReactPlayer' is not a valid JSX element. The types returned by 'render()' ......
Read more >cannot be used as a jsx component. its return type 'element
A component needs to return a single root element. You can use fragments to package an array of elements as a single element,...
Read more >Component cannot be used as a JSX component in React
The error Component cannot be used as a JSX component occurs for multiple reasons, returning an array of JSX elements instead of a...
Read more >Some components "cannot be used as a JSX component"
[Solved]-Some components "cannot be used as a JSX component"-Reactjs. Search. score:16. Accepted answer. I updated react & react-dom . npm i react@18 ...
Read more >App can not be used as JSX component - react error - YouTube
Join this channel to get access to perks:https://www.youtube.com/channel/UCoSpmr2KNOxjwE_B9ynUmig/joinMy GearCamera ...
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
@MarianaK96 I think this will help as it worked for me:
Possibly relevant? https://github.com/microsoft/fluentui/issues/16058#issuecomment-749258586