opentok / opentok-react

React components for OpenTok.js
https://www.npmjs.com/package/opentok-react
MIT License
107 stars 105 forks source link

scriptjs dependency not compatible with SSR #50

Open jedrichards opened 5 years ago

jedrichards commented 5 years ago

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.

athmangude commented 3 years ago

This can be loaded dynamically on the client side only using next/dynamic

marsch commented 3 years ago

just import the needed components directly

import OTSession from 'opentok-react/dist/OTSession'

no preload is triggered. Somehow it works for me at least

usamatekrowe commented 3 years ago

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

rogercbe commented 2 years ago

If you are using NextJS one solution could be this one.