Closed giovannipds closed 4 years ago
Thank you for the report. I've tried several idea's, the final result can be see in PR https://github.com/matvp91/shaka-player-react/pull/3.
The first idea I had was to make shaka-player-react "importable" by next.js, but this failed as global objects like "document" and "window" are not recognized by node. I quickly gave up on the idea for the following reasons:
With these comments in mind, I've managed to make it work by relying on next/dynamic
, which allows you to ignore components to be handled by the server. I've noticed this is also how it works in the sample you've posted.
import dynamic from 'next/dynamic';
const ShakaPlayer = dynamic(
() => import('shaka-player-react'),
{ ssr: false },
);
// Use <ShakaPlayer ... /> as if it was directly imported from shaka-player-react
Unless I've missed something, this feels like a reasonable approach to use shaka-player-react
with Next.js. I'll add a Next.js explanation in the README.
Let me know what you think.
I'd probably agree with you in everything. Great effort, thanks! =] Feel free to close the issue as soon as it gets documented.
As we've discussed at google/shaka-player#2163, the component may not be working right away with https://github.com/zeit/next.js, probably because of Shaka's non support for SSR.
There's a sample here loading the Shaka dynamically so it's possible to avoid Shaka that non support: https://github.com/amit08255/shaka-player-react-with-ui-config/tree/master/nextjs-shaka-player
It may be interesting to handle this in the component.