React Typescript socket.io-client Typescript error on io.connect

Issue

I am using React Typescript with socket.io-client 4.0.0 and @types/socket.io-client 3.0.0. All is good up to a point in the code:

socket = io.connect(`ws://${WS_DOMAIN}:${WS_PORT}`, { transports: ["websocket"] });

I am getting the following error on io.connect:

any
Property 'connect' does not exist on type '{ (opts?: Partial<ManagerOptions &
SocketOptions> | undefined): Socket<DefaultEventsMap, DefaultEventsMap>; (uri: string, 
opts?: Partial<...> | undefined): Socket<...>; (uri: string | Partial<...>, opts?: 
Partial<...> | undefined): Socket<...>; }'.ts(2339)

I would like the error to go away but of course, I do not know how to get rid of it. This is the only error I have in my tsx file.

It is worth to mention this is a class-based component. The IO is imported as such:

import { io } from 'socket.io-client';

and type is assigned before initialization of the class:

let socket: any;

Solution

Looking at the documentation I have noticed that the way IO connection is used is as follows:

io(`ws://${WS_DOMAIN}:${WS_PORT}`, { transports: ["websocket"] });

so without the io.connect part

This has also resolved my issue. Hope this helps someone that might encounter similar problem.

Answered By - xyz83242