I’m create a real-time web app with next.js 14, with App router.
I’m adding a MQTT connection, which is using Mosquito under the hood.
I’m using the mqtt.js library and connecting to the broker like this:

const mqttClient: MqttClient = mqtt.connect("ws://my-broker-name:883", {
  reconnectPeriod: 1000,
  connectTimeout: 30 * 1000,
  keepalive: 60,
});

I’m doing this in a separete file, in order to create only one instance of the mqttClient.
After that I’m creating a route handler, where I’m importing the mqtt initialization module and subscribing to topics of the mqttClient. The route handler (GET) is after that called in my root page.tsx page.

The error I’m getting is very weird, I couldn’t find almost any recourses about it:

 ⨯ uncaughtException: TypeError: bufferUtil.mask is not a function
    at module.exports.mask (webpack-internal:///(rsc)/./node_modules/ws/lib/buffer-util.js:121:23)
    at Sender.frame (webpack-internal:///(rsc)/./node_modules/ws/lib/sender.js:138:7)
    at Sender.send (webpack-internal:///(rsc)/./node_modules/ws/lib/sender.js:359:16)
    at WebSocket.send (webpack-internal:///(rsc)/./node_modules/ws/lib/websocket.js:476:18)
    at duplex._write (webpack-internal:///(rsc)/./node_modules/ws/lib/stream.js:151:8)
    at doWrite (node:internal/streams/writable:590:12)
    at clearBuffer (node:internal/streams/writable:774:7)
    at onwrite (node:internal/streams/writable:644:7)
    at afterWrite (node:internal/streams/writable:701:5)
    at afterWriteTick (node:internal/streams/writable:687:10)
    at process.processTicksAndRejections (node:internal/process/task_queues:81:21)

I will appriciate any suggestions and help.
If some additional info is needed, I’ll provide : )

I debugged the code at it seems like there is some kind of issue with the timing – the mqttClient isn’t initialized fast enough, so it is undefined by the time it’s being used in the handling route function.