ReactPlayer not working in React 17 and Next 10

Current Behavior

ReactPlayer is not working with NextJS. I use ReactPlayer to show videos in several formats like mp4 and hls.

At the moment, I am upgrading my dependencies from prior versions to current stable. After updating versions, I get an exception from the console and the page crashes. Versions:

+        "next": "^10.0.6",
+        "react": "^17.0.1",
+        "react-dom": "^17.0.1",
-        "next": "^9.3.6",
-        "react": "^16.12.0",
-        "react-dom": "^16.12.0",

I use the current version of react-player@2.8.2. The error message in the browser console:

> Uncaught undefined
> The above error occurred in one of your React components:
    in Unknown (created by ReactPlayer)
    in Suspense (created by ReactPlayer)
    in div (created by ReactPlayer)
    in ReactPlayer (created by ForwardRef(LoadableComponent))
    in ForwardRef(LoadableComponent) (at VideoPlayer.tsx:77)
    in VideoPlayer (at VideoPlayer.tsx:69)
    in div (created by VideoPlayer__Wrapper)
   [...]

It looks like the problem comes from the React.Suspense Component, so, I switched to next/dynamic import, with no success:

const ReactPlayer = global?.window && dynamic(() => import('react-player/lazy/'), { ssr: false });

Also there is no change if omit the global.window check or the lazy-Package.

Expected Behavior

ReactPlayer should only load client side in NextJS App.

Environment

• URL attempting to play: URL from our own cdn with mp4 or hls ressource
• Browser: Chrome@88
• Operating system: macOS 11

[laneparton]

PSA: In case anyone comes across this…

Double checking that react and react-dom are ^17.0.2 solved this for me. I was facing the issues above - importing main or lazy wasn’t working.

[adarsht]

facing same issue… working fine if i import from react-player/youtube with following version: “react”: “^17.0.0”, “react-player”: “^2.9.0”,