ReferenceError: window is not defined

[vkhanh74]

I using react-hls lib with next.js but when i import lib in component it throw an error: ReferenceError: window is not defined

[devcshort]

I using react-hls lib with next.js but when i import lib in component it throw an error: ReferenceError: window is not defined

This package isn't able to be rendered server side, due to the underlying Javascript library being used. However, you can use Next.js Dynamic Import with SSR disabled to use this component in a Next.js app. See example below.

import dynamic from 'next/dynamic';

const HlsPlayerWithNoSSR = dynamic(
  () => import('react-hls-player'),
  { ssr: false }
);

function MyVideoComponent() {
  return (
    <div>
      <HlsPlayerWithNoSSR autoplay />
    </div>
  );
}

[devcshort]

Did this work for you @vkhanh74 ?

[gosuwtf]

This worked for me with Next.js @devcshort

[devcshort]

This worked for me with Next.js @devcshort

Thanks @natelook

@vkhanh74 I'm going to close this for now. Feel free to re-open if you are still having issues.