Error handling upgrade request TypeError: Cannot read properties of undefined (reading 'bind')

[sharadregoti]

Getting unknow error, the client is connected and disconnected automatically and instantly.

Next JS Version: "14.1.2"

API Router Code: used the example provided

// app/api/ws/route.ts (can be any route file in the app directory)
export function SOCKET(
    client: import('ws').WebSocket,
    request: import('http').IncomingMessage,
    server: import('ws').WebSocketServer,
) {
    console.log('A client connected!');

    client.on('message', message => {
        client.send(message);
    });

    client.on('close', () => {
        console.log('A client disconnected!');
    });
}

Logs

 ⨯ No HTTP methods exported in '/home/sharad/personal/opencore-labs/app/api/ws/route.ts'. Export a named export for each HTTP method.
A client connected!
Error handling upgrade request TypeError: Cannot read properties of undefined (reading 'bind')
    at DevServer.handleRequestImpl (/home/sharad/personal/opencore-labs/node_modules/next/dist/server/base-server.js:461:50)
    at async /home/sharad/personal/opencore-labs/node_modules/next/dist/server/dev/next-dev-server.js:331:20
    at async Span.traceAsyncFn (/home/sharad/personal/opencore-labs/node_modules/next/dist/trace/trace.js:151:20)
    at async DevServer.handleRequest (/home/sharad/personal/opencore-labs/node_modules/next/dist/server/dev/next-dev-server.js:328:24)
    at async handleRoute (/home/sharad/personal/opencore-labs/node_modules/next/dist/server/lib/router-utils/resolve-routes.js:319:33)
    at async resolveRoutes (/home/sharad/personal/opencore-labs/node_modules/next/dist/server/lib/router-utils/resolve-routes.js:539:28)
    at async upgradeHandler (/home/sharad/personal/opencore-labs/node_modules/next/dist/server/lib/router-server.js:416:50)
    at async Server.<anonymous> (/home/sharad/personal/opencore-labs/node_modules/next/dist/server/lib/start-server.js:169:13)
A client disconnected!

Patching Step

npx next-ws-cli@latest patch
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
[next-ws] Patching Next.js v14.1.2 with patch ">=13.5.1 <=14.1.4"...
[next-ws] Adding WebSocket server setup script to NextNodeServer constructor...
[next-ws] Preventing Next.js from immediately closing WebSocket connections...
[next-ws] Adding 'SOCKET' to the page module interface type...
[next-ws] Saving patch information file...
[next-ws] All done! You can now install the core Next WS package if you haven't already

Client Side

 wscat --connect ws:https://localhost:3000/api/ws
Connected (press CTRL+C to quit)
Disconnected (code: 1006, reason: "")

[apteryxxyz]

I was unable to reproduce with the examples/basic, so I seached that error in the Next.js repo issues and found this. It would appear as though this error is caused by the middleware being applied on WebSocket requests (error caused by _res.setHeader.bind(...), but Sockets do not have .setHeader so is undefined). I am assuming you are using a middleware, so can you exclude your WebSocket route from your config matcher.

[sharadregoti]

Yes, I am using a middleware (clerk IDP authentication).

Added my weboscket endpoint to ignore list & it started working.

export const config = {
    matcher: [
        // Exclude paths with a dot and specifically exclude /api/ws*
        '/((?!.*\\..*|_next|api/ws).*?)',
        // Include root
        '/',
        // Include paths starting with /api and /trpc, but exclude /api/ws*
        '/(api(?!/ws)|trpc)(.*)'
    ],
};