@opentok/client not compatible with SSR about opentok-react

[jackblackCH]

Facing same issues. Is there any good workaround?

[stevelong-at-prplrs]

Delay loading the OpenTok library until the app is running in the browser.

How you do that will change depending on your particular framework.

[nimrabaig-embrace]

@stevelong-at-prplrs How to do that on NextJs?

[rogercbe]

As @stevelong-at-prplrs mentioned, the problem is that NextJs will try to render it server side and OpenTok needs to be run on the client because it needs access to the browser. It wont work server side hence: ReferenceError: window is not defined.

To overcome that you need to run OpenTok only on the client, one solution is to use next/dynamic to avoid rendering the component server side.

A working solution could be wrapping up all your OpenTok session in a component and dinamically import it.

/pages/index.js

import dynamic from "next/dynamic";

const OpenTokWrap = dynamic(() => import("../../components/OpenTokWrap"), {
  ssr: false, // important to disable SSR
});

export default function Home() {
  return (
      <OpenTokWrap />
  )
};

/components/OpenTokWrap.jsx

import {
  preloadScript,
  OTSession,
  OTPublisher,
  OTStreams,
  OTSubscriber,
} from "opentok-react";

const OpenTokWrap = ({ session }) => (
  <OTSession apiKey="api-key" sessionId="session-id token="token">
    <OTPublisher />
    <OTStreams>
      <OTSubscriber />
    </OTStreams>
  </OTSession>
);

export default preloadScript(OpenTokWrap);