TypeError: bufferUtil.mask is not a function

[Qodestackr]

Which package/packages do you use?

• [x] @stream-io/video-react-sdk
• [ ] @stream-io/video-react-native-sdk
• [ ] @stream-io/video-client

Describe the bug A clear and concise description of what the bug is.

 ✓ Compiled in 1957ms (618 modules)
TypeError: bufferUtil.mask is not a function
    at module.exports.mask (webpack-internal:///(ssr)/./node_modules/ws/lib/buffer-util.js:117:23)
    at Sender.frame (webpack-internal:///(ssr)/./node_modules/ws/lib/sender.js:143:5)
    at Sender.dispatch (webpack-internal:///(ssr)/./node_modules/ws/lib/sender.js:400:29)
    at Sender.send (webpack-internal:///(ssr)/./node_modules/ws/lib/sender.js:356:14)
    at WebSocket.send (webpack-internal:///(ssr)/./node_modules/ws/lib/websocket.js:468:18)
    at StableWSConnection.onopen (webpack-internal:///(ssr)/./node_modules/@stream-io/video-client/dist/index.es.js:13029:22)
    at callListener (webpack-internal:///(ssr)/./node_modules/ws/lib/event-target.js:290:14)
    at WebSocket.onOpen (webpack-internal:///(ssr)/./node_modules/ws/lib/event-target.js:237:9)
    at WebSocket.emit (node:events:514:28)
    at WebSocket.setSocket (webpack-internal:///(ssr)/./node_modules/ws/lib/websocket.js:237:10)
    at ClientRequest.eval (webpack-internal:///(ssr)/./node_modules/ws/lib/websocket.js:983:15)
    at ClientRequest.emit (node:events:514:28)
    at TLSSocket.socketOnData (node:_http_client:575:11)
    at TLSSocket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:376:12)
    at readableAddChunk (node:internal/streams/readable:349:9)
    at Readable.push (node:internal/streams/readable:286:10)
    at TLSWrap.onStreamRead (node:internal/stream_base_commons:190:23)
    at TLSWrap.callbackTrampoline (node:internal/async_hooks:130:17)
 ⨯ node_modules/ws/lib/buffer-util.js (117:0) @ module.exports.mask
 ⨯ uncaughtException: TypeError: bufferUtil.mask is not a function
    at module.exports.mask (webpack-internal:///(ssr)/./node_modules/ws/lib/buffer-util.js:117:23)
    at Sender.frame (webpack-internal:///(ssr)/./node_modules/ws/lib/sender.js:143:5)
    at Sender.dispatch (webpack-internal:///(ssr)/./node_modules/ws/lib/sender.js:400:29)
    at Sender.send (webpack-internal:///(ssr)/./node_modules/ws/lib/sender.js:356:14)
    at WebSocket.send (webpack-internal:///(ssr)/./node_modules/ws/lib/websocket.js:468:18)
    at StableWSConnection.onopen (webpack-internal:///(ssr)/./node_modules/@stream-io/video-client/dist/index.es.js:13029:22)
    at callListener (webpack-internal:///(ssr)/./node_modules/ws/lib/event-target.js:290:14)
    at WebSocket.onOpen (webpack-internal:///(ssr)/./node_modules/ws/lib/event-target.js:237:9)
    at WebSocket.emit (node:events:514:28)
    at WebSocket.setSocket (webpack-internal:///(ssr)/./node_modules/ws/lib/websocket.js:237:10)
    at ClientRequest.eval (webpack-internal:///(ssr)/./node_modules/ws/lib/websocket.js:983:15)
    at ClientRequest.emit (node:events:514:28)
    at TLSSocket.socketOnData (node:_http_client:575:11)
    at TLSSocket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:376:12)
    at readableAddChunk (node:internal/streams/readable:349:9)
    at Readable.push (node:internal/streams/readable:286:10)
    at TLSWrap.onStreamRead (node:internal/stream_base_commons:190:23)
    at TLSWrap.callbackTrampoline (node:internal/async_hooks:130:17)
null
 ⨯ node_modules/ws/lib/buffer-util.js (117:0) @ module.exports.mask
 ⨯ uncaughtException: TypeError: bufferUtil.mask is not a function
    at module.exports.mask (webpack-internal:///(ssr)/./node_modules/ws/lib/buffer-util.js:117:23)
    at Sender.frame (webpack-internal:///(ssr)/./node_modules/ws/lib/sender.js:143:5)
    at Sender.dispatch (webpack-internal:///(ssr)/./node_modules/ws/lib/sender.js:400:29)
    at Sender.send (webpack-internal:///(ssr)/./node_modules/ws/lib/sender.js:356:14)
    at WebSocket.send (webpack-internal:///(ssr)/./node_modules/ws/lib/websocket.js:468:18)
    at StableWSConnection.onopen (webpack-internal:///(ssr)/./node_modules/@stream-io/video-client/dist/index.es.js:13029:22)
    at callListener (webpack-internal:///(ssr)/./node_modules/ws/lib/event-target.js:290:14)
    at WebSocket.onOpen (webpack-internal:///(ssr)/./node_modules/ws/lib/event-target.js:237:9)
    at WebSocket.emit (node:events:514:28)
    at WebSocket.setSocket (webpack-internal:///(ssr)/./node_modules/ws/lib/websocket.js:237:10)
    at ClientRequest.eval (webpack-internal:///(ssr)/./node_modules/ws/lib/websocket.js:983:15)
    at ClientRequest.emit (node:events:514:28)
    at TLSSocket.socketOnData (node:_http_client:575:11)
    at TLSSocket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:376:12)
    at readableAddChunk (node:internal/streams/readable:349:9)
    at Readable.push (node:internal/streams/readable:286:10)
    at TLSWrap.onStreamRead (node:internal/stream_base_commons:190:23)
    at TLSWrap.callbackTrampoline (node:internal/async_hooks:130:17)
null
 ○ Compiling /api/auth/[...nextauth] ...
 ✓ Compiled /favicon.ico in 7.6s (1377 modules)
 ✓ Compiled (1404 modules)
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo3LCJleHAiOjE3MTc3ODEyNzYsImlhdCI6MTcxNzc3NzYxNn0.dCk33zUZVrm6EbrMHHUVqO5A2wehyVJCtzrwrtnNjFk from getstream?
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo3LCJleHAiOjE3MTc3ODEyNzcsImlhdCI6MTcxNzc3NzYxN30.RJYD8BguKcE-XLlAz-BSQ6zlolPvGToOOXpmL56Kobw from getstream?
TypeError: isValidUTF8 is not a function
    at module.exports.isValidUTF8 (webpack-internal:///(ssr)/./node_modules/ws/lib/validation.js:120:53)
    at Receiver.dataMessage (webpack-internal:///(ssr)/./node_modules/ws/lib/receiver.js:517:43)
    at Receiver.getData (webpack-internal:///(ssr)/./node_modules/ws/lib/receiver.js:446:17)
    at Receiver.startLoop (webpack-internal:///(ssr)/./node_modules/ws/lib/receiver.js:148:22)
    at Receiver._write (webpack-internal:///(ssr)/./node_modules/ws/lib/receiver.js:83:10)
    at writeOrBuffer (node:internal/streams/writable:447:12)
    at _write (node:internal/streams/writable:389:10)
    at Writable.write (node:internal/streams/writable:393:10)
    at TLSSocket.socketOnData (webpack-internal:///(ssr)/./node_modules/ws/lib/websocket.js:1272:35)
    at TLSSocket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:376:12)
    at readableAddChunk (node:internal/streams/readable:349:9)
    at Readable.push (node:internal/streams/readable:286:10)
    at TLSWrap.onStreamRead (node:internal/stream_base_commons:190:23)
    at TLSWrap.callbackTrampoline (node:internal/async_hooks:130:17)
 ⨯ node_modules/ws/lib/validation.js (120:0) @ module.exports.isValidUTF8
 ⨯ uncaughtException: TypeError: isValidUTF8 is not a function
    at module.exports.isValidUTF8 (webpack-internal:///(ssr)/./node_modules/ws/lib/validation.js:120:53)
    at Receiver.dataMessage (webpack-internal:///(ssr)/./node_modules/ws/lib/receiver.js:517:43)
    at Receiver.getData (webpack-internal:///(ssr)/./node_modules/ws/lib/receiver.js:446:17)
    at Receiver.startLoop (webpack-internal:///(ssr)/./node_modules/ws/lib/receiver.js:148:22)
    at Receiver._write (webpack-internal:///(ssr)/./node_modules/ws/lib/receiver.js:83:10)
    at writeOrBuffer (node:internal/streams/writable:447:12)
    at _write (node:internal/streams/writable:389:10)
    at Writable.write (node:internal/streams/writable:393:10)
    at TLSSocket.socketOnData (webpack-internal:///(ssr)/./node_modules/ws/lib/websocket.js:1272:35)
    at TLSSocket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:376:12)
    at readableAddChunk (node:internal/streams/readable:349:9)
    at Readable.push (node:internal/streams/readable:286:10)
    at TLSWrap.onStreamRead (node:internal/stream_base_commons:190:23)
    at TLSWrap.callbackTrampoline (node:internal/async_hooks:130:17)
null
 ⨯ node_modules/ws/lib/validation.js (120:0) @ module.exports.isValidUTF8
 ⨯ uncaughtException: TypeError: isValidUTF8 is not a function
    at module.exports.isValidUTF8 (webpack-internal:///(ssr)/./node_modules/ws/lib/validation.js:120:53)
    at Receiver.dataMessage (webpack-internal:///(ssr)/./node_modules/ws/lib/receiver.js:517:43)
    at Receiver.getData (webpack-internal:///(ssr)/./node_modules/ws/lib/receiver.js:446:17)
    at Receiver.startLoop (webpack-internal:///(ssr)/./node_modules/ws/lib/receiver.js:148:22)
    at Receiver._write (webpack-internal:///(ssr)/./node_modules/ws/lib/receiver.js:83:10)
    at writeOrBuffer (node:internal/streams/writable:447:12)
    at _write (node:internal/streams/writable:389:10)
    at Writable.write (node:internal/streams/writable:393:10)
    at TLSSocket.socketOnData (webpack-internal:///(ssr)/./node_modules/ws/lib/websocket.js:1272:35)
    at TLSSocket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:376:12)
    at readableAddChunk (node:internal/streams/readable:349:9)
    at Readable.push (node:internal/streams/readable:286:10)
    at TLSWrap.onStreamRead (node:internal/stream_base_commons:190:23)
    at TLSWrap.callbackTrampoline (node:internal/async_hooks:130:17)
null
 ✓ Compiled /not-found in 386ms (1406 modules)

Noob here trying to implement what JS mastery did but using NextAuth in prod alongside your tools have brought wiered bugs. Kindly let me know any changes to sdks that I might not be aware of.

[myandrienko]

Hi @Qodestackr,

A few questions for you:

1. Could you review all the places where new StreamVideoClient is created? Is it possible that you're calling this constructor server-side, maybe in an API route?
2. Are you using the App router in Next? If so, are you creating new StreamVideoClient in a server component (component not marked with "use client")?

Generally, there should be no need to create StreamVideoClient server-side.

For an example of using video-react-sdk with Next.js and NextAuth, check out our sample Next.js application, especially these two places:

[1] Authenticating with NextAuth: https://github.com/GetStream/stream-video-js/blob/main/sample-apps/react/react-dogfood/pages/auth/signin.tsx [2] Generating a token for StreamVideoClient from NextAuth session: https://github.com/GetStream/stream-video-js/blob/main/sample-apps/react/react-dogfood/lib/getServerSideCredentialsProps.ts