jwplayer / jwplayer-react

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Feature] Support SSR Rendring

snelsi opened this issue · comments

JWPlayer fails to render on Server Side.
Tested in the Next.js application.

The JWPlayer component tries to access window property, which doesn't exist on the server, resulting in the following error:

window is not defined
ReferenceError: window is not defined
    at /sandbox/node_modules/@jwplayer/jwplayer-react/lib/jwplayer-react.js:2:9899
    ...

Checkout this sandbox:
https://codesandbox.io/s/next-js-forked-yl5wme?file=/pages/index.js

Expected result:
JWPlayer component should skip Server Side rendering, or defer the usage of the window to prevent the error

Issue can be resolved by hiding the player on SSR render and then rendering it on the frontend. I am unfamiliar with Next.js, but with Gatsby it can be done using the following:

const [showPlayer, setShowPlayer] = useState(false);

useEffect(() => {
    setShowPlayer(true);
}, []);

return (
    {showPlayer && <JWPlayer>}
);

@jasonlav
Yes, you can manually hide this error by skiping server side rendering of the component.
But this logic should be included in the library out of the box, since most of the modern web-applications are rendered on the Server Side

Any official update on this issue?
Even with the suggested recommentation from @jasonlav I have the following error (which might be related to #12 and #13) :

image

bump. we'd like to see out of the box SSR support as well (planning on scaling this package)

commented

@snelsi @jasonlav @kenchambers @mdaoust-sidlee We have made an update to support server side rendering on branch improvement/add-support-for-SSR. Please test this new feature out and let us know if you have any feedback.

If you see any other issues with this feel free to open another issue.