ReactPlayer not working in React 17 and Next 10

[fmacherey]

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

[fmacherey]

I forked your repo and extend the window check with a second check, if you are using global.window like with nextjs. Feel free to upstream into this repo:

[fmacherey@macbook react-player (fix-window-check *+)]$ git diff HEAD src
diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
index 1b875b8..fc05741 100644
--- a/src/ReactPlayer.js
+++ b/src/ReactPlayer.js
@@ -10,11 +10,12 @@ import Player from './Player'
 const Preview = lazy(() => import(/* webpackChunkName: 'reactPlayerPreview' */'./Preview'))

 const IS_BROWSER = typeof window !== 'undefined' && window.document
+const IS_GLOBAL = global && global.window && global.window.document;
 const SUPPORTED_PROPS = Object.keys(propTypes)

 // Return null when rendering on the server
 // as Suspense is not supported yet
-const UniversalSuspense = IS_BROWSER ? Suspense : () => null
+const UniversalSuspense = IS_BROWSER || IS_GLOBAL ? Suspense : () => null

 const customPlayers = []

[fmacherey@macbook react-player (fix-window-check *+)]$ git diff HEAD src

[fmacherey]

@cookpete well, webpack polyfills the global variable, therefore it is not available in the bundled version when I install the player as dep. The same issues re-occur. I have now a patched version without the React.Suspense and React.lazy logic and only bundle the FilePlayer, as I only need this at the moment.

Maybe we can find a solution together to have your version working for Next and SSR in favour of my fork 😃

[cookpete]

@fmacherey Can you post some steps on how to reproduce this? I just cloned react-next-boilerplate and added ReactPlayer to it, and everything works fine (both in dev and when running the built version).

[TheManFromEarth1]

@cookpete He mentioned SSR (Server Side Rendering).

SSR is not by default, you would need to call it on a page where you embed react-player.

https://nextjs.org/docs/basic-features/pages#server-side-rendering

[cookpete]

@TheManFromEarth1 SSR seemed to be active in the standard react-next-boilerplate build. I could view the source of a built page and it would show the server-rendered markup, including an empty react-player wrapper, with no problems.

@fmacherey Are you using @hot-loader/react-dom or some other react-dom alias in your project? I've seen Uncaught undefined errors when there is a version mismatch (ie something else needs to be bumped to 17.0.1).

[fmacherey]

@cookpete no i'm not using this package. I noticed the bug while upgrading from next 9 to 10 and react 16 to 17. Maybe there was some mess up with versions.
Thanks for submitting the fix.

[ghost]

@cookpete Hello 😄

I might have the same issue with gatsby when updating react and react-dom from ^16.3.1 to ^17.0.1.
My version of react-player is 2.9.0

On react & react-dom 17.0.1 I have the exact same error as described above. Works like a charm on 16.13.1.
I don't know if this is related to this issue, sorry for reopening if it is not

[huntedman]

I had the same issue when importing the whole react-player bundle.

Since I only use vimeo, I tried importing ReactPlayer from react-player/vimeo. This fixed my problem.

react-player 2.9
webpack 5
next 10.2
react & react-dom 17.0.2

[mzparacha]

I am facing this issue as well. I am on react v 17, no Next or Getsby. I have created a new project and this works there. Same react version and same library version 2.9.0. When ever I comment this <ReactPlayer url={url}> it works perfectly

[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",

[lack-of-gravitas]

Same issue on NextJS (^11.0.1) - breaks if importing main or /lazy

[joebentaylor1995]

Same issue on Gatsby 3.11.1

[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.