opentok-react
opentok-react copied to clipboard
scriptjs dependency not compatible with SSR
Including opentok-react
in an application that is rendered server side in Node (e.g. using a popular framework like Gatsby, Next etc) results in the following error:
ReferenceError: document is not defined
From this line: https://github.com/ded/script.js/blob/master/src/script.js#L6
To be clear, you don't need to use the preloadScript
utility to trigger this error, all you need to do is include opentok-react
in your app. The error happens as scriptjs
is imported here:
https://github.com/opentok/opentok-react/blob/master/src/preloadScript.js#L4
This is related to #43. You could either set @opentok/client
as a normal dependency and let npm do what it's designed for - resolve dependencies, or use an alternative approach more suited to modern tooling (e.g. dynamic import
). I'll make some suggestions on #43.
This can be loaded dynamically on the client side only using next/dynamic
just import the needed components directly
import OTSession from 'opentok-react/dist/OTSession'
no preload is triggered. Somehow it works for me at least
Try opentok-react-nextJS component (npm component),
To load opentok script file you have to use "NextJS Head Tag"
import Head from "next/head";
inside Head define your script
If you are using NextJS one solution could be this one.