react-hls
react-hls copied to clipboard
SSR error (Gatsby)
When using SSR in Gatsby, the build stage throws the following error:
ERROR #95313
Building static HTML failed for path "/"
See our docs page for more info on this error: https://gatsby.dev/debug-html
72 | };
73 | }, [autoPlay, hlsConfig, playerRef, src]);
> 74 | if (Hls.isSupported())
| ^
75 | return React.createElement("video", __assign({ ref: playerRef }, props));
76 | return React.createElement("video", __assign({ ref: playerRef, src: src, autoPlay: autoPlay }, props));
77 | }
It appears to be coming from hls.js
. The problem is that any reference to window
or document
will throw an error during SSR, although this appears to have been rectified in subsequent versions of hls.js
(the latest version doesn't seem to mention either window
or document
). Might be worth bumping the version in your package.json
.
For anyone stumbling across this issue, a quick fix is to conditionally render your <ReactHlsPlayer />
component, dependant on whether or not window
is defined:
import React from "react";
import ReactHlsPlayer from 'react-hls-player';
const MyVideoComponent = (props) => {
return (
typeof window !== "undefined" ?
<ReactHlsPlayer src={src} />
: null
);
};
export default MyVideoComponent;
Cheers.