4.8.1 Socket.io with Nextjs Type Errors

[anthonyalayo]

Hey all, has anyone encountered this recently and know how to fix it?

   Checking validity of types  ..../app/socket-test/page.tsx:8:12
Type error: Property 'on' does not exist on type 'Socket<DefaultEventsMap, DefaultEventsMap>'.

   6 | export default function Home() {
   7 |   useEffect(() => {
>  8 |     socket.on('connect', () => {
     |            ^
   9 |       console.log('Connected to server');
  10 |     });
  11 |
Next.js build worker exited with code: 1 and signal: null

[zzz6519003]

This is usually caused by importing the wrong Socket type in client code. In a browser/Next.js client component, use the client package:

import { io, type Socket } from "socket.io-client";

const socket: Socket = io(process.env.NEXT_PUBLIC_SITE_URL!, {
  path: "/api/socket/io",
  addTrailingSlash: false,
});

useEffect(() => {
  socket.on("connect", () => {
    console.log("Connected");
  });

  return () => {
    socket.disconnect();
  };
}, []);

Do not import Socket from "socket.io" in client-side code, and make sure you have the same version of socket.io-client installed:

npm ls socket.io socket.io-client

If you already have a Socket annotation, remove it entirely unless you truly mean the client Socket type.

[darrachequesne]

For future readers:

Please check our Next.js guide: https://socket.io/how-to/use-with-nextjs