Websocket is not defined error

I'm getting a "WebSocket is not defined error" on my next app connected to an express backend. Any idea what I'm doing wrong? My server/index file is import * as trpcExpress from "@trpc/server/adapters/express"; import { applyWSSHandler } from "@trpc/server/adapters/ws"; import express from "express"; import cors from "cors"; import { appRouter } from "./routers/_app"; import { createContext } from "./context"; import ws from 'ws' const app = express(); app.use(cors({ origin: ["http://localhost:3000", "http://localhost:3001"] })); app.use( "/trpc", trpcExpress.createExpressMiddleware({ router: appRouter, createContext, }) ); const server = app.listen(8000); applyWSSHandler({ wss: new ws.Server({ server }), router: appRouter, createContext }) My context file is import { inferAsyncReturnType } from "@trpc/server"; import * as trpcExpress from "@trpc/server/adapters/express"; import { NodeHTTPCreateContextFnOptions } from '@trpc/server/adapters/node-http'; import { IncomingMessage } from 'http'; import ws from 'ws'; export const createContext = ({ req, res }: trpcExpress.CreateExpressContextOptions | NodeHTTPCreateContextFnOptions<IncomingMessage, ws>) => { return ({ req, res }) } export type Context = inferAsyncReturnType<typeof createContext>;
A
anan7435d ago
My Next app's _app.tsx file is import React, { useState } from 'react'; import '../styles/globals.css'; import { AppProps } from 'next/app'; import Head from 'next/head'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { httpBatchLink, createWSClient, wsLink, splitLink } from '@trpc/client'; import { trpc } from '@/utils/trpc'; function getCookie(name: string) { const cookies = document.cookie.split(";"); for (let cookie of cookies) { let [cookieName, cookieValue] = cookie.trim().split("="); if (cookieName === name) return cookieValue; } return "empty"; } export default function SharedApp(props: AppProps) { const { Component, pageProps } = props; const [queryClient] = useState(() => new QueryClient()); const [trpcClient] = useState(() => trpc.createClient({ links: [ splitLink({ condition: op => { return op.type === "subscription" }, true: wsLink({ client: createWSClient({ url: 'ws://localhost:8000/trpc', }) }), false: httpBatchLink({ url: 'http://localhost:8000/trpc', headers() { return { authorization: getCookie("user-token"), }; }, }), }) ], }), ); return ( <trpc.Provider client={trpcClient} queryClient={queryClient}> <QueryClientProvider client={queryClient}> <Head> <title>Cravin</title> <link rel="icon" href="/cravinwebicon16.png" /> <meta name="description" content="An app for serving food" /> <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" /> </Head> <Component {...pageProps} /> </QueryClientProvider> </trpc.Provider> ); } Little help here please?