TypeScript Question: How to use room.makeAction when room is possible null? about trystero HOT 2 CLOSED

The problem is that conditional that checks for window makes TypeScript think it could be undefined and not able to be destructured. Is that client check necessary if you're using 'use client'?

In any case, makeAction() isn't really a hook, just a normal function, so you can call it conditionally wherever you'd like.

from trystero.

Next.JS 13/14 renders everything completely on the server by default.

use client does opt out of React Server Components but you can still get Server Side Rendering and client-side hydration with Next.JS.

So if I use the following code:

"use client"
import {joinRoom} from 'trystero'
import {useEffect, useRef} from 'react'

export const useRoom = (roomConfig, roomId) => {
  const roomRef = useRef(joinRoom(roomConfig, roomId))

  useEffect(() => {
    roomRef.current = joinRoom(roomConfig, roomId)
    return () => roomRef.current.leave()
  }, [roomConfig, roomId])

  return roomRef.current
}

I'll get the following error from trystero:

 node_modules/simple-peer-light/index.js (98:0) @ new Peer
 ⨯ unhandledRejection: Error: No WebRTC support: Specify `opts.wrtc` option in this environment
    at new Peer (webpack-internal:///(ssr)/./node_modules/simple-peer-light/index.js:102:11)
    at initPeer (webpack-internal:///(ssr)/./node_modules/trystero/src/utils.js:26:16)
    at eval (webpack-internal:///(ssr)/./node_modules/trystero/src/torrent.js:64:75)
    at Array.map (<anonymous>)
    at makeOffers (webpack-internal:///(ssr)/./node_modules/trystero/src/torrent.js:63:10)
    at makeOfferPool (webpack-internal:///(ssr)/./node_modules/trystero/src/torrent.js:73:31)
    at announceAll (webpack-internal:///(ssr)/./node_modules/trystero/src/torrent.js:235:17) {
  code: 'ERR_WEBRTC_SUPPORT'

So directly calling joinRoom in the useRef doesn't work with Next.JS. I could make a new issue if you consider this a bug.

Anyway, being able to call makeAction conditionally solves this problem. Thanks for the tip!

from trystero.