SSR error (Gatsby)

[lewisdonovan]

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.