'ReactPlayer' cannot be used as a JSX component

[MarianaK96]

Current 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

1. Yarn add react-player
2. Add 'import ReactPlayer from 'react-player' in your file
3. 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.

The error:

[MarianaK96]

I noticed my package.json file doesn't include react-player, but yarn.lock does.

"peerDependencies": {
    "@types/react-redux": "^7.x",
    "react-redux": "^7.x",
    "redux-saga": "^1.1.3"
  },
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@craco/craco": "^6.1.2",
    "@emotion/react": "^11.7.0",
    "@emotion/styled": "^11.6.0",
    "@headlessui/react": "^1.2.0",
    "@heroicons/react": "^1.0.1",
    "@material-ui/icons": "^4.11.2",
    "@microsoft/signalr": "^5.0.11",
    "@mui/material": "^5.2.2",
    "@tailwindcss/aspect-ratio": "^0.2.1",
    "@tailwindcss/forms": "^0.3.3",
    "@tailwindcss/postcss7-compat": "^2.2.16",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@tinymce/tinymce-react": "^3.12.6",
    "@types/jest": "^27.0.1",
    "@types/node": "^14.17.3",
    "@types/react-dom": "^17.0.11",
    "@types/react-redux": "^7.x",
    "@types/react-router-dom": "^5.3.2",
    "@types/styled-components": "^5.1.10",
    "@types/webrtc": "^0.0.31",
    "axios": "^0.21.1",
    "browserslist": "^4.19.2",
    "chroma-js": "^2.1.2",
    "connected-react-router": "^6.9.1",
    "date-fns": "^2.27.0",
    "env-cmd": "^10.1.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "eslint": "^7.20.0",
    "firebase": "^9.5.0",
    "get-user-locale": "^1.4.0",
    "html-react-parser": "^1.2.7",
    "i18next": "^20.2.1",
    "i18next-browser-languagedetector": "^6.1.0",
    "i18next-http-backend": "^1.2.1",
    "jquery": "^3.6.0",
    "lodash": "^4.17.21",
    "markdown-to-jsx": "^7.1.3",
    "msw": "^0.35.0",
    "node-sass": "^5.0.0",
    "peer": "^0.6.1",
    "peerjs": "^1.3.2",
    "popper.js": "^1.16.1",
    "react": "^17.0.2",
    "react-accessible-accordion": "^4.0.0",
    "react-bootstrap": "^1.5.2",
    "react-bootstrap-sweetalert": "^5.2.0",
    "react-circle-flags": "^0.0.14",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.1.1",
    "react-i18next": "^11.8.13",
    "react-icons": "^4.3.1",
    "react-redux": "^7.x",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-select": "^4.3.1",
    "react-super-responsive-table": "^5.2.0",
    "react-tag-input-component": "^1.0.7",
    "react-toastify": "^7.0.4",
    "redux-saga": "^1.1.3",
    "rxjs": "^7.5.2",
    "sass": "^1.39.2",
    "semantic-ui-react": "^2.0.4",
    "styled-components": "^5.3.0",
    "ts-jest": "^27.0.5",
    "typescript": "^4.3.2",
    "typewriter-effect": "^2.18.0",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start:dev": "env-cmd -f .env.development react-scripts start",
    "start": "CLIENT_ENV=production craco start",
    "start:local": "CLIENT_ENV=development craco start",
    "startwin": "SET CLIENT_ENV=development & craco start",
    "build": "craco build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.4",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-typescript": "^7.15.0",
    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/node-logger": "^6.2.9",
    "@storybook/preset-create-react-app": "^3.1.7",
    "@storybook/react": "^6.2.9",
    "@types/enzyme": "^3.10.9",
    "@types/jest": "^27.0.1",
    "@types/react": "^17.0.38",
    "@types/react-select": "^4.0.17",
    "@types/react-test-renderer": "^17.0.1",
    "autoprefixer": "^9",
    "babel-jest": "^27.1.0",
    "jest": "^27.1.0",
    "jest-localstorage-mock": "^2.4.18",
    "postcss": "^7",
    "regenerator-runtime": "^0.13.9",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
  }
}

[jamesofficer]

I have the same problem. I just did a test and noticed I get this issue when creating a preact project with vite. If I create a react project with vite then the problem goes away. These are both completely fresh projects, only setup then running npm i react-player.

I'm not sure what's causing the issue, but all the other libraries have worked fine in my preact project. Looks like it may be a Typescript issue of some kind.

[cookpete]

Possibly relevant? https://github.com/microsoft/fluentui/issues/16058#issuecomment-749258586

[mavcom12]

i'm not sure if this will help but the same error occurred to me and I found out that somehow 2.10.1 causes it. i used 2.9.0 for now and it's working fine

[mavcom12]

I recently found out even when using 2.9.0 yarn install seems to give this error. though npm install doesn't. I checked and they do both install the same version 2.9.0, so maybe something to look into

[Mutesa-Cedric]

@MarianaK96 I think this will help as it worked for me:

import { default as _ReactPlayer } from 'react-player/lazy';
import { ReactPlayerProps } from "react-player/types/lib";
const ReactPlayer = _ReactPlayer as unknown as React.FC<ReactPlayerProps>;

[x43n]

Yea for me it was having two version of @types/react in my yarn.lock. Solved by adding a resolution.

[martavis]

I solved it by adding/updating @types/react.