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

Question

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;

Joan · Accepted Answer · 2022-08-30 13:07:13Z

8

I would install "@types/socket.io" and then on client side, import like this:

import * as io from "socket.io-client";
const socket = io.connect("http://localhost:4000");

It cleared the error for me.

edited Aug 30, 2022 at 13:07

answered Aug 30, 2022 at 12:58

Joan

1131 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maffelu Over a year ago

This answer is deprecated now as the types are bundled with socket.io.

xyz83242 · Accepted Answer · 2022-01-29 19:27:27Z

6

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 Jan 29, 2022 at 19:27

xyz83242

8463 gold badges19 silver badges33 bronze badges

Comments

Narendra Maurya · Accepted Answer · 2022-06-30 08:26:54Z

0

[2022]:In the type script react project this might help you. For the latest socket.io-client this is working fine for me.

I have solve this issue by with this following code.

import { io } from 'socket.io-client';
const ChatRoom =({username,room})=>{
 const socket = io('http://localhost:3001');
 const joinRoom = () => {
    if (username !== "" && room !== "") {
      socket.emit("join_room", room);
     
    }

useEffect(()=>{
    joinRoom();
},[room])
  };


  return (
    <div className="App">
      <ChatComponent socket={socket} username={username} room={room} />
    </div>
  );
}

answered Jun 30, 2022 at 8:26

Narendra Maurya

4794 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related